从AngularJS上传文件到NodeJS的交叉错误

关键词：

【中文标题】从AngularJS上传文件到NodeJS的交叉错误【英文标题】：Cross error uploading file from AngularJS to NodeJS 【发布时间】：2014-08-27 20:56:30 【问题描述】：

我在将文件从 angularjs 客户端上传到 NodeJS 服务器时遇到问题。

错误：

XMLHttpRequest cannot load http://localhost:801/bill/send-by-email. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. 

另一个 $http 请求工作正常，但这个不行，这是我的客户端代码：

define([], function () 
    "use strict";

    var UploadService = function (API_URL, $http) 
        var uploadFile = function (file, uploadUrl) 
            var fd = new FormData();
            fd.append('file',file);
            return $http(
                method: 'POST',
                url: API_URL+uploadUrl,
                headers: 
                    'Content-Type': 'multipart/form-data'
                ,
                data: 
                    file: file
                ,
                transformRequest: fd
            );

        ;
        return 
            uploadFile: uploadFile
        ;
    ;
    return UploadService;
);

这是服务器代码和交叉代码：

//Normal express definition
app.use(express.compress());
    app.use(express.methodOverride());
    app.use(express.cookieParser());
    app.use(express.bodyParser(limit: '500mb',keepExtensions: true, uploadDir: "uploads" ));
    app.use(express.json(limit: '100mb'));
    app.use(express.urlencoded(limit: '100mb'));
    app.use(passport.initialize());
    app.use(passport.session());
    app.all('*', require('./middleware/logger')(log));
    app.all('*', require('./middleware/cors')(log));

cors 文件：

var env = require('../env');

module.exports = function(log) 
    "use strict";

    var host = env.host;
    log.warn('Configuring Access-Control-Allow-Origin to ' + host);
    return function(req, res, next) 
        res.header("Access-Control-Allow-Origin", host);
        res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
        res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        res.header("Access-Control-Allow-Credentials", "true");
        next();
    ;
;

还有我的环境文件：

var envs = 
    'development' : 
        'host' : 'http://localhost:8000',
        'sleep': true,
        'name': 'development',
        'ssl': false
    ,
    'test' : 
        'host' : 'edited',
        'sleep': false,
        'name': 'test',
        'ssl': false
    ,
    'production' : 
        'host' : 'edited',
        'sleep': false,
        'name': 'production',
        'ssl': true
    
;

var node_env = process.env.NODE_ENV || 'development';

谁知道问题出在哪里？

【问题讨论】：

不同的端口 = 不同的来源。 我没有做与其他请求不同的事情，端口相同.. http://localhost:8000 上的应用程序正在尝试从 http://localhost:801 加载内容。端口不一样。 这是因为 8000 端口是 angularj 客户端，80​​1 端口是 nodejs 服务器。 因此它是一个不同的域。使用您的 CORS 设置授予客户端对服务器的访问权限。 【参考方案1】：

您需要允许您的客户CORS 访问，因为它位于不同的域中。由于您的端口不同，浏览器和服务器会将它们识别为彼此无关的独立域。

res.header("Access-Control-Allow-Origin", 'http://localhost:8000');

【讨论】：

我用不同的环境设置环境文件，其中之一是它的 localhost:8000【参考方案2】：

我就是这样用的，效果很好

response.setHeader('Content-Type', 'application/json');
            response.setHeader('Access-Control-Allow-Origin', '*');
            response.setHeader('Access-Control-Allow-Headers', '*');
            response.setHeader('Access-Control-Allow-Credentials', 'true');
            response.setHeader('X-SERVED-BY', 'Site Name');

试试放 *

【讨论】：

我用不同的环境设置环境文件，其中之一是它的 localhost:8000【参考方案3】：

错误是请求，它没有正确的content-type 并返回此错误。 cors 没问题。

我是这样编辑的：

define([], function () 
    "use strict";

    var UploadService = function (API_URL, $http) 
        var uploadFile = function (file, uploadUrl) 
            var fd = new FormData();
            fd.append('file', file);
            return $http.post(API_URL + uploadUrl,fd,
                withCredentials: true,
                headers: 'Content-Type': undefined ,
                transformRequest: angular.identity
            );

        ;
        return 
            uploadFile: uploadFile
        ;
    ;
    return UploadService;
);

【讨论】：

【参考方案4】：

在您的 Node.js 上启用 CORS

这是一个热门的网址，可用于多种配置 http://enable-cors.org/server.html

【讨论】：

我做到了，我在问题中描述了如何。 你甚至没有检查我的网址，比较设置，因为你的显然不起作用，不是吗？

将电影从电子内部的 angularJS SPA 上传到 cloudinary

】将电影从电子内部的angularJSSPA上传到cloudinary【英文标题】：UploadmovietocloudinaryfromangularJSSPAinsideelectron【发布时间】：2019-01-0515:44:54【问题描述】：我想从电子应用程序的前端将文件从用户光盘上传到云端，这是angularJSSPA。我已... 查看详情

使用 Angularjs 和 Nodejs 从 HTML 表单另存为 JSON 文件

】使用Angularjs和Nodejs从HTML表单另存为JSON文件【英文标题】：SaveasJSONfilefromHTMLformusingAngularjsandNodejs【发布时间】：2016-12-1909:58:31【问题描述】：我有点卡住了，请帮助我。我正在尝试从HTML表单另存为JSON文件。我不知道如何将数... 查看详情

如何从 angularjs 和 CORS 支持将文件上传到球衣

】如何从angularjs和CORS支持将文件上传到球衣【英文标题】：howtouploadfiletojerseyfromangularjsandCORSsupport【发布时间】：2017-03-1703:50:51【问题描述】：我正在尝试创建上传文件服务。所以我在服务器端关注theguidehere。theguidehere用于客户... 查看详情

如何使用 NodeJS + AngularJS 从文件中删除一些奇怪的错误

】如何使用NodeJS+AngularJS从文件中删除一些奇怪的错误【英文标题】：HowtoremoveweirderrorsdeletingsomethingfromafileusingNodeJS+AngularJS【发布时间】：2018-08-2806:06:59【问题描述】：这个问题是关于NodeJS如何处理HTTP响应的知识我正在尝试使用N... 查看详情

nodejs + multer + angularjs 无需重定向即可上传

】nodejs+multer+angularjs无需重定向即可上传【英文标题】：nodejs+multer+angularjsforuploadingwithoutredirecting【发布时间】：2016-01-0214:32:18【问题描述】：我正在使用Nodejs+Multer+angularjs在服务器上上传文件。我有一个简单的HTML文件：<formact... 查看详情

nodejs怎么从request获取上传文件

参考技术A可以使用第三方的js库,比如spark-md5.js。上传文件后,调用对应的api即可以获取到上传文件的md5。本回答被提问者采纳 查看详情

将“本地”文件从 nodejs 上传到 rails graphql 后端（服务器到服务器）

】将“本地”文件从nodejs上传到railsgraphql后端（服务器到服务器）【英文标题】：Uploadinga"LOCAL"filefromnodejstorailsgraphqlbackend(servertoserver)【发布时间】：2021-12-0604:27:37【问题描述】：这与“客户端到服务器”上传无关。我正... 查看详情

Objective C - NodeJS - 如何将特定文件（不是图像）从 iOS 应用程序上传到服务器？

...ObjectiveC-NodeJS-如何将特定文件（不是图像）从iOS应用程序上传到服务器？【英文标题】：ObjectiveC-NodeJS-Howtouploadaspecificfile(notanimage)fromtheiOSapptotheserver?【发布时间】：2016-10-1309:00:27【问题描述】：我需要使用nodeJS将包含一些标题... 查看详情

使用 NodeJS 将文件上传到 Amazon S3

】使用NodeJS将文件上传到AmazonS3【英文标题】：UploadafiletoAmazonS3withNodeJS【发布时间】：2015-03-1702:49:28【问题描述】：我在尝试将文件上传到我的S3存储桶时遇到了问题。一切正常，除了我的文件参数似乎不合适。我正在使用AmazonS... 查看详情

从服务器端nodejs到angularjs的有限json响应

】从服务器端nodejs到angularjs的有限json响应【英文标题】：Gettinglimitedjsonresponsefromserversidenodejstoangularjs【发布时间】：2018-06-2015:24:41【问题描述】：我从node.js服务器得到这个json响应。我使用angularjsng-repeat函数在我的前端显示这个... 查看详情

从（AngularJS）单页应用程序直接（并且简单！）AJAX 上传到 AWS S3

】从（AngularJS）单页应用程序直接（并且简单！）AJAX上传到AWSS3【英文标题】：Direct(andsimple!)AJAXuploadtoAWSS3from(AngularJS)SinglePageApp【发布时间】：2015-04-2816:23:49【问题描述】：我知道有很多关于上传到AWSS3的报道。但是，我已经为... 查看详情

如何将数据从 AngularJS 前端传递到 Nodejs 后端？

】如何将数据从AngularJS前端传递到Nodejs后端？【英文标题】：HowtopassdatafromAngularJSfrontendtoNodejsbackend?【发布时间】：2016-06-1211:09:52【问题描述】：我这里有一些Angular的js代码。<!DOCTYPEhtml><htmllang="en"><head><scriptsrc="Sc... 查看详情

使用 Websockets 和 Nodejs 上传文件

】使用Websockets和Nodejs上传文件【英文标题】：UploadFileswithWebsocketsandNodejs【发布时间】：2014-01-0402:45:29【问题描述】：我正在尝试实现一个文件上传器，其中HTML输入文件由WebSocket发送到Nodejs服务器。尝试从HTML的FileReaderAPI读取BLOB... 查看详情

nodejs问题将graphql上传文件发送到服务

】nodejs问题将graphql上传文件发送到服务【英文标题】：nodejsissuesendinggraphqluploadfiletoservice【发布时间】：2019-11-2719:26:37【问题描述】：我正在使用graphql-upload将文件从Web客户端上传到apolloexpress服务器到另一台服务器，该服务器需... 查看详情

没有从另一个 Nodejs 服务器获得响应？

...】：我正在学习Nodejs。我面临一个小问题。我正在将文件上传到谷歌云服务。所有类型的文件都在上传，我正在获得文件的签名URL。我正在将签名的URL从一个nodejs服务器发送到另一台nodejs服务器。在上传jpg或png文件时，它的成功 查看详情

AngularJS、NodeJS：将数据保存到 Json 文件或数据库

】AngularJS、NodeJS：将数据保存到Json文件或数据库【英文标题】：AngularJS,NodeJS:savedatatoaJsonfileoradatabase【发布时间】：2020-12-2621:23:11【问题描述】：我是AngularJS和nodeJS的新手而且我似乎找不到我需要的信息，我希望这里有人可以提... 查看详情

如何使用 PostgreSQL 将数据从 AngularJS 前端传递到 Nodejs 后端？

】如何使用PostgreSQL将数据从AngularJS前端传递到Nodejs后端？【英文标题】：HowtopassdatafromAngularJSfrontendtoNodejsbackendusingPostgreSQL?【发布时间】：2016-12-2905:47:11【问题描述】：使用HTML和AngularJS准备好登录页面和注册页面。我已连接数... 查看详情

如何使用 NodeJs 代理多个文件上传？

】如何使用NodeJs代理多个文件上传？【英文标题】：HowtoproxymultiplefileuploadusingNodeJs?【发布时间】：2021-12-2501:54:50【问题描述】：好的，所以我需要代理从我的express节点应用程序上传的文件数组到远程PHPApi。理想情况下，我会使... 查看详情