CORS:当凭据标志为真时，无法在 Access-Control-Allow-Origin 中使用通配符

2022-01-15 00:00:00 django cors node.js ajax django-cors-headers

我有一个涉及

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

Frontend server (Node.js, domain: localhost:3000) <---> Backend (Django, Ajax, domain: localhost:8000)

浏览器 <-- webapp <-- Node.js(服务应用)

Browser <-- webapp <-- Node.js (Serve the app)

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

Browser (webapp) --> Ajax --> Django(Serve ajax POST requests)

现在，我的问题在于 Web 应用程序用于对后端服务器进行 Ajax 调用的 CORS 设置.在 chrome 中，我不断得到

Now, my problem here is with CORS setup which the webapp uses to make Ajax calls to the backend server. In chrome, I keep getting

当凭证标志为真时，不能在 Access-Control-Allow-Origin 中使用通配符.

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

在 Firefox 上也不起作用.

doesn't work on firefox either.

我的 Node.js 设置是:

My Node.js setup is:

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 中，我正在使用 这个中间件 连同这个

And in Django I'm using this middleware along with this

webapp 发出这样的请求:

The webapp makes requests as such:

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

因此，webapp 发送的请求标头如下所示:

So, the request headers that the webapp sends looks like:

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 --disable-web-security，但现在希望事情能够真正发挥作用.

Edit 1: I've been using chrome --disable-web-security, but now want things to actually work.

编辑 2:答案:

所以，我的解决方案 django-cors-headers 配置:

So, solution for me django-cors-headers config:

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/
)

推荐答案

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

This is a part of security, you cannot do that. If you want to allow credentials then your Access-Control-Allow-Origin must not use *. You will have to specify the exact protocol + domain + port. For reference see these questions :

  1. Access-Control-Allow-Origin 通配符子域、端口和协议
  2. 使用凭证的跨源资源共享

除了 * 过于宽松，会破坏凭据的使用.因此将 http://localhost:3000 或 http://localhost:8000 设置为允许来源标头.

Besides * is too permissive and would defeat use of credentials. So set http://localhost:3000 or http://localhost:8000 as the allow origin header.

相关文章