设置Access-Control-Allow-Origin不适用于AJAX / Node.js

I keep facing the same error over and over again:

我一遍又一遍地面对同样的错误:

XMLHttpRequest cannot load http://localhost:3000/form. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 404.

I've read countless posts similar to this one and they all pretty much have the same answer, namely to add the following setting: res.setHeader('Access-Control-Allow-Origin', '*'). That's what I've been doing but it still doesn't work. I gave an angular.js app on localhost:8000 (when a btn is clicked logsth() is called) and my node works on localhost:3000. Here's what they look like:

我已经阅读了与此类似的无数帖子,他们几乎都有相同的答案,即添加以下设置:res.setHeader('Access-Control-Allow-Origin','*')。这就是我一直在做的事情,但它仍然无效。我在localhost:8000上给了一个angular.js应用程序(当点击btn时调用了logsth()),我的节点在localhost:3000上运行。这是他们的样子:

app.controller('Contact', ['$scope', function($scope) {
    $scope.logsth = function(){
        var datas = {'may':'4','june':'17'};
        $.ajax({
          url: 'http://localhost:3000/form',
          method: 'POST',
          crossDomain: true,
          data: datas
        });
    };
}]);

And my node:

我的节点:

var express = require('express');
var router = express.Router();
var app = express();

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.post('/form', function(req, res){
    console.log("e-mail sent");
    res.send('yey');
});

module.exports = router;

Not too much code here but for now I'm only looking to get rid of the error.

这里没有太多代码,但是现在我只想摆脱错误。

EDIT: When I use app.use(...) and app.post(...) and go to localhost:3000/form I get 404 error. But when I use router.use(...) and router.post(...) at least the link works fine. Also, there is no 'allow-origin' error, but I do get: POST http://localhost:3000/form 404 (Not Found). However, when I go to http://localhost:3000/form it displays the response and console.log. Should I leave it as router instead of app?

编辑:当我使用app.use(...)和app.post(...)并转到localhost:3000 /表格时,我收到404错误。但是当我使用router.use(...)和router.post(...)时,至少链接工作正常。此外,没有'allow-origin'错误,但我得到:POST http:// localhost:3000 / form 404(Not Found)。但是,当我转到http:// localhost:3000 / form时,它会显示响应和console.log。我应该把它作为路由器而不是应用程序吗?

2 个解决方案

#1

Just leave this single line did the trick for me:

离开这条单线对我来说是个窍门:

res.setHeader('Access-Control-Allow-Origin', '*');

Update:

You can try to install cors module from npm.

您可以尝试从npm安装cors模块。

#2

The issue is that you're returning a wildcard origin (*) and trying to pass credentials (res.setHeader('Access-Control-Allow-Credentials', true);). You cannot to both. If you must use Access-Control-Allow-Credentials, then you will need to be explicit about the allowed origins in your Access-Control-Allow-Origin header.

问题是您正在返回通配符源(*)并尝试传递凭据(res.setHeader('Access-Control-Allow-Credentials',true);)。你不能两者兼得。如果必须使用Access-Control-Allow-Credentials,则需要明确说明Access-Control-Allow-Origin标头中允许的来源。

So, either remove this:

所以,要么删除这个:

res.setHeader('Access-Control-Allow-Credentials', true);

Or change the origins to this:

或者将原点更改为:

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

#1