我有一个设置

前端服务器(Node.js,域:localhost:3000) <——>后端(Django, Ajax,域:localhost:8000)

浏览器<——webapp <——Node.js(服务应用程序)

浏览器(webapp) -> Ajax -> Django(服务Ajax POST请求)

现在,我在这里的问题是CORS设置,web应用程序使用它来对后端服务器进行Ajax调用。在chrome,我一直得到

当凭据标志为真时,不能在Access-Control-Allow-Origin中使用通配符。

也不能在firefox上工作。

我的Node.js设置是:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

在Django中,我使用了这个中间件

web应用程序发出这样的请求:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

所以,webapp发送的请求头是这样的:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

下面是响应头:

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

我哪里说错了?!

编辑1:我一直在使用chrome—禁用web-security,但现在想让事情真正工作。

编辑2:答案:

django-cors-headers配置的解决方案:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

当前回答

(编辑)之前推荐的插件不再可用,您可以尝试其他的插件


出于Chrome的开发目的,安装 这个添加将消除特定的错误:

Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687' 
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

安装后,通过单击AddOn's (CORS,绿色或红色)图标并填充适当的文本框,确保将您的url模式添加到截获的url。这里要添加的用于http://localhost:8080的示例URL模式是:*://*

其他回答

这是安全的一部分,你不能这么做。如果你想允许凭证,那么你的Access-Control-Allow-Origin不能使用*。您必须指定确切的协议+域+端口。参考以下问题:

访问控制-允许起源通配符子域,端口和协议 使用凭证的跨起源资源共享

此外,*过于宽松,会阻碍凭证的使用。因此,将http://localhost:3000或http://localhost:8000设置为allow origin头文件。

试一试:

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

如果你正在使用express,你可以使用cors包来支持cors,而不是编写中间件;

var express = require('express')
, cors = require('cors')
, app = express();

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});

扩展@Renaud的想法,cors现在提供了一个非常简单的方法来做到这一点:

以下是cors官方文件:

" origin:配置Access-Control-Allow-Origin CORS头。 可能的值: 布尔-将origin设置为true以反映请求源,由req.header(' origin ')定义,或将其设置为false以禁用CORS。 "

因此,我们简单地做以下事情:

const app = express();
const corsConfig = {
    credentials: true,
    origin: true,
};
app.use(cors(corsConfig));

最后,我认为值得一提的是,在某些用例中,我们希望允许来自任何人的跨起源请求;例如,在构建公共REST API时。

虽然关于cors的起源我们有很多解决方案,但是我想我可以补充一些缺失的部分。一般来说,在node.js中使用cors中间件可以达到最大的目的,比如不同的http方法(get, post, put, delete)。

但也有像发送cookie响应这样的用例,我们需要在cors中间件中启用凭据为真,否则我们不能设置cookie。还有一些用例可以访问所有的原点。在这种情况下,我们应该用,

{credentials: true, origin: true}

对于特定的原点,我们需要指定原点的名称,

{credential: true, origin: "http://localhost:3000"}

对于多个原点,

{credential: true, origin: ["http://localhost:3000", "http://localhost:3001" ]}

在某些情况下,我们可能需要允许多个原点。一个用例是只允许开发人员。要获得这种动态白名单,我们可以使用这种函数

const whitelist = ['http://developer1.com', 'http://developer2.com']
const corsOptions = {
origin: (origin, callback) => {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error())
    }
  }
}