CORS:当credentials标志为true时,无法在Access-Control-Allow-Origin中使用通配符

Question

我有一个涉及的设置

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

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

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

现在,我的问题在于CORS设置,webapp使用它来向后端服务器进行Ajax调用.在chrome中,我一直在努力

当credentials标志为true时,无法在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我使用这个中间件 与此相伴

webapp发出如下请求:

$.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 --disable-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/
)

Answer 1

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

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

除了*过于宽容并且会失败使用凭证.所以设置http://localhost:3000或http://localhost:8000允许原始标题.

Answer 2

如果您使用CORS中间件并且想要发送withCredential布尔值true,则可以像这样配置CORS:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));

Answer 3

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

从此处找到的 cors 官方文档：

" origin：配置 Access-Control-Allow-Origin CORS 标头。可能的值： Boolean - 将 origin 设置为 true 以反映请求来源，如 req.header('Origin') 所定义，或将其设置为 false 以禁用 CORS . ”

因此，我们只需执行以下操作：

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

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

注意：我希望将此作为对他的回答的评论，但不幸的是我没有声誉点。

Answer 4

如果您正在使用,express您可以使用cors包来允许CORS,而不是编写您的中间件;

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

app.use(cors());

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

Answer 5

试试吧:

const cors = require('cors')

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

}
app.use(cors(corsOptions));

Answer 6

这在开发中对我有用，但我不能建议在生产中，这只是完成工作的一种不同方式，尚未提到但可能不是最好的。无论如何，这里是：

您可以从请求中获取源，然后在响应标头中使用它。这是它在 express 中的样子：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

我不知道你的 python 设置会是什么样子，但这应该很容易翻译。

Answer 7

如果您想允许所有来源并保持凭据真实，这对我有用：

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));