CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true(CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符)
问题描述
我有一个涉及
前端服务器(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 :
- Access-Control-Allow-Origin 通配符子域、端口和协议
- 使用凭证的跨源资源共享
除了 *
过于宽松,会破坏凭据的使用.因此将 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.
这篇关于CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:CORS:当凭据标志为真时,无法在 Access-Control-Allow-Origin 中使用通配符
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01