Question

我在将文件从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));

the 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';

任何人都知道这个问题是什么？

Answer 1

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

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

Answer 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');

尝试放*

Answer 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;
});

Answer 4

在Node.js上启用CORS

以下是针对多种配置执行此操作的热门URL http://enable-cors.org/server.html

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

4 个答案: