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

I have a setup involving

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

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

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

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

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

doesn't work on firefox either.

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();
};

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

The webapp makes requests as such:

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

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="***"

And here's the response header:

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

Where am I going wrong?!

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

Edit 2: Answer:

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

转载于:https://stackoverflow.com/questions/19743396/cors-cannot-use-wildcard-in-access-control-allow-origin-when-credentials-flag-i

0
csdnceshi78
程序go yeah the point is not the http, it is the / at the end. I suppose omitting http could work, but I've not really worked on this stuff for some years, so don't really know what works now!
一年多之前 回复
weixin_41568126
乱世@小熊 why you say with the http works for you? we all only 'localhost:3000' works.
一年多之前 回复
csdnceshi54
hurriedly% how about the frontend and backend in different PC?
一年多之前 回复
csdnceshi78
程序go yes
一年多之前 回复
csdnceshi54
hurriedly% Do you mean you use develop the frontend and backend in one PC?
一年多之前 回复
csdnceshi60
℡Wang Yan For me it is localhost:3000 without http, like this: CORS_ORIGIN_WHITELIST = ( 'localhost:3000', )
接近 2 年之前 回复
csdnceshi61
derek5. ...I love you...I spent hours debugging it....damn Firefox didn't return any message!
大约 3 年之前 回复

4个回答

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 wildcard subdomains, ports and protocols
  2. Cross Origin Resource Sharing with Credentials

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

23
csdnceshi75
衫裤跑路 a man in the middle attack would cause one to send credentials to any (*) server
大约一年之前 回复
csdnceshi73
喵-见缝插针 Is it possible to provide localhost of a different computer than the server? I got this error: "The 'Access-Control-Allow-Origin' header has a value 'localhost:3000' that is not equal to the supplied origin. Origin 'localhost:3000' is therefore not allowed access."
接近 2 年之前 回复
csdnceshi71
Memor.の Ok, so how exactly does the server know whether or not it should send "*"?
2 年多之前 回复
csdnceshi65
larry*wei What is the "exact domain" if the request comes from mobile device, like it can happen with Cordova?
接近 3 年之前 回复
csdnceshi79
python小菜 Could you explain "Besides * is too permissive and would defeat use of credentials."?
接近 3 年之前 回复
csdnceshi56
lrony* What if I'm getting the same error message but there is no Access-Control-Allow-Headers in the response?
3 年多之前 回复
csdnceshi50
三生石@ You can give a list of domains. Related question: stackoverflow.com/questions/1653308/…
4 年多之前 回复
csdnceshi78
程序go But what if there's more than one domain?
4 年多之前 回复

try it:

const cors = require('cors')

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

}
app.use(cors(corsOptions));
10
csdnceshi73
喵-见缝插针 works with angular cli e.g
一年多之前 回复

If you are using CORS middleware and you want to send withCredential boolean true, you can configure CORS like this:

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));
9
csdnceshi54
hurriedly% Happy that it helped :)
一年多之前 回复
weixin_41568208
北城已荒凉 This is the configuration I was missing. TK
一年多之前 回复

If you are using express you can use the cors package to allow CORS like so instead of writing your middleware;

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

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});
2
weixin_41568110
七度&光 Thanks for update.
接近 2 年之前 回复
csdnceshi80
胖鸭 - that url is no more in use - find the following working url https://github.com/expressjs/cors
接近 2 年之前 回复
csdnceshi78
程序go Thanks Mate!
大约 2 年之前 回复
weixin_41568110
七度&光 After reading this documentation: github.com/expressjs/corsuse i using this config: app.use(cors({credentials: true, origin: 'localhost:3001'})); is working for me.
3 年多之前 回复
csdnceshi60
℡Wang Yan BTW, I was using django-cors-headers, but things were not working, so I coupled it with a custom middleware as well.
5 年多之前 回复
csdnceshi60
℡Wang Yan Yeah man, tried that before to no avail, had CORS_ORIGIN_ALLOW_ALL = True, CORS_ORIGIN_WHITELIST = ( 'localhost' ) and CORS_ALLOW_CREDENTIALS = True I get these headers: Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://localhost3000/ Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE Content-Type: application/json
5 年多之前 回复
csdnceshi56
lrony* So you have two Django middlewares ? I would only use django-cors-header app. Make sure you add localhost to CORS_ORIGIN_WHITELIST setting and set CORS_ALLOW_CREDENTIALS to True
5 年多之前 回复
csdnceshi60
℡Wang Yan Woops, forgot to mention, I'm using that as well!
5 年多之前 回复
csdnceshi56
lrony* You might want to look into this Django CORS middleware that is tested.
5 年多之前 回复
csdnceshi60
℡Wang Yan Ah, now that's more convenient, however, the result's the same :( BTW, I'm using app.use(cors({credentials: true}));
5 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Cors跨域请求,配置Access-Control-Allow-Origin:"*",无效解决方案
由于应用需要跨域请求数据,博主在JDK8、Tomcat7.0的cors可以配置Access-Control-Allow-Origin:"*",但是我按照文档配置以后却没有生效,一度怀疑是tomcat或者jdk的问题,最后想起来web.xml是按照从前往后的顺序加载的。解决方案:是filter位置的问题,你把整个放到第一个filter的位置就可以了。给出web.xml: <web-app
Ajax跨域问题的解决方法之一 —— "Access-Control-Allow-Origin"
Ajax跨域问题的解决方法之一 —— “Access-Control-Allow-Origin”环境 后台语言 使用框架 Nodejs express 问题正常情况下使用Ajax请求时,若应用与服务器间的协议,端口或域名有任意一个不同,则请求跨域。 浏览器报错信息:XMLHttpRequest cannot load http://xxx/xxx. Origin http://xxx
cors安全完全指南
这篇文章翻译自:https://www.bedefended.com/papers/cors-security-guide 作者:Davide Danelon 译者:聂心明 译者博客:https://blog.csdn.net/niexinming 版本:1.0 - 2018年-七月 1. _介绍 这个指南收集关于cors所有的安全知识,从基本的到高级的,从攻击到防御 ...
jersey构建rest接口,ajax跨域访问(原因:CORS 头缺少 'Access-Control-Allow-Origin')
用jersey构建的接口,RestClient可以访问,但是当端进行访问的时候就会出错。 查阅一下资料 大概意思为 跨域请求,当域名不一样的时候,服务器会拒绝访问。 这时候需要加入过滤器来进行控制请求,允许访问服务器 以下为接口代码和过滤器代码 package com.limeng.test; import javax.ws.rs.GET; import javax.ws.rs.P...
加载图层报错“CORS 头 'Access-Control-Allow-Origin' ,解决办法
加载Featurelayer,报错“CORS 头 'Access-Control-Allow-Origin' 不匹配 'http://localhost:81'”,查了下原因,应该是没有设置代理导致的原因 在加载图层前加入下面这句话 esri.config.defaults.io.corsDetection=false; 图层可以被加载上而不报错了。 并不是很清楚问
解决了设置了Access-Control-Allow-Origin: *还是跨域的问题。
说起跨域请求,大家首先想到的就会是设置请求头Access-Control-Allow-Origin: *。但是有时候只设置这么一样还是解决不了的跨域问题就要分的比较细的设置请求头了: access-control-allow-headers: Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-Wit...
利用Access-Control-Allow-Origin响应头解决跨域请求原理
传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing)。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求。 在服务器响应客户端的时
解决NodeJS+Express模块的跨域访问控制问题:Access-Control-Allow-Origin
在一个项目上想用NodeJS,在前端的JS(http://localhost/xxx)中ajax访问后端RestAPI(http://localhost:3000/….)时(Chrome)报错: XMLHttpRequest cannot load http://localhost:3000/auth/xxx/xxx. Origin http://localhost is not all
已被CORS策略阻止:请求的资源上没有'Access-Control-Allow-Origin'标头 (使用Access-Control-Allow-Origin解决跨域)
问题:已被CORS策略阻止:请求的资源上没有'Access-Control-Allow-Origin'标头(跨域请求失败) 解决方法:使用过滤器设置Access-Control-Allow-Origin解决跨域请求 第一步:创建过滤器 package com.ljw.filter; import java.io.IOException; import javax.servlet....
CORS 跨域资源访问
参考: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS https://www.w3.org/TR/cors/ http://www.ruanyifeng.com/blog/2016/04/cors.html一. 概述CORS(Cross-Origin Resource Sharing,跨域资源访问):
利用Access-Control-Allow-Origin响应头解决跨域请求
传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing)。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规范,实现了跨域请求。 在服务器响应客户端的时
一劳永逸:域名支持通配符,ASP.NET Core中配置CORS
ASP.NET Core 内置了对 CORS 的支持,使用很简单,只需先在 Startup 的 ConfigureServices() 中添加 CORS 策略: public void ConfigureServices(IServiceCollection services) { services.AddCors(options =&amp;gt; options.AddPolicy(...
实测 CORS 跨域访问之 Access-Control-Allow-Origin 多域名设置
通过 Windows 与虚拟机 Linux 的交互,实现 CORS 跨域访问,并在响应头的 Access-Control-Allow-Origin 中成功实现允许多个域名跨域访问。最后给出注意事项。
OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法
在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Control-Allow-Origin' header is present on the requested resource,可以通过下面的思路来进行下排查: 1. 确认检查CORS规则是否设置好了,是否设置正确,正确的设置方法如下图:   2. CORS设置都正确的话,那
关于Access-Control-Allow-Origin的跨域错误解决
网页似乎比flash还严格, 子域名之间都不能互相访问 必须在
Allow-Control-Allow-Origin 谷歌跨域扩展插件
Access-Control-Allow-Origin 解决跨域权限问题,在谷歌浏览器输入:chrome://extensions,然后把下载好的文件拖入chrome://extensions页面,点击安装即可完成安装即可使用
基于Jersey,使用web.xml拦截器出现的cors问题
一开始web.xml的初始配置如下:
Golang利用Access-Control-Allow-Origin响应头解决跨域请求问题
1、在http请求的响应流头部加上如下信息: rw.Header().Set("Access-Control-Allow-Origin", "*") rw是http.ResponseWriter对象 2、Beego中添加路由过滤器 beego.InsertFilter("*", beego.BeforeRouter, cors.Allow(&cors.Options{
Allow-Control-Allow-Origin谷歌跨域扩展插件
google chrome 安装 CORS插件可直接本地ajax调式远程服务解口,解决跨域问题。
Firefox/Chrome/IE Ajax 怎样设置允许跨域请求
一般js出现跨域请求时时,浏览器会出现错误,解决方法为在服务器的页面header加Access-Control-Allow-Origin参数 chrome:XMLHttpRequest cannot load xxx.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Firefox错误:已阻止跨域源请求:同源策略禁止取位于 http://...xxx 的远程资源.(原因: CORS 头缺少
Access-Control-Allow-Origin和反向代理处理跨域
什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 所谓同源是指,域名,协议,端口相同。浏览器执行javascript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行。 同源策略的目的,是防止黑客做一些做奸犯科的勾当。比如说,如果一个银行的一个应用允许用户上传网页,如果没有同源策略,
使用Spring Boot的跨源CORS设置
使用Spring Boot的跨源CORS设置
Vue项目跨域设置,axios跨域不成功的一个小问题( Vue CLI3跨域请求,Vue proxyTable配置,Access-Control-Allow-Origin )
Vue项目,因为前后端分离,所以在请求后端接口时,时常遇到跨站问题, 1、如果前后端项目部署时候不在同域名下,前端不用配置,后端做好CORS配置即可,后端配置可参考https://blog.csdn.net/envon123/article/details/83270277 2、如果前后端部署在同一个域名,就不会有跨域问题,但一般是生产环境部署是同一个域名下,但在开发环境时,并不是同域名呀,所...
解决使用zuul的时候出现的跨域response多allow-origin值的问题
解决使用zuul的时候出现的跨域response多allow-origin值的问题 解决跨域问题: @Configuration public class CorsConfig { @Bean public CorsFilter corsFilter(){ final UrlBasedCorsConfigurationSource source = new Url...
nginx 解决access-control-allow-origin CORS跨域安全访问问题及秘钥文件的配置
 利用nginx实现https访问,同时添加秘钥和和防止跨站访问,这里我只修改了一些默认的参数, vi nginx.conf server { listen 443 default_server ssl; # 打开https的端口号,启用https的443端口 server_name www.a.com; # 服务器的...
关于跨域请求静态文件配置问题[Access-Control-Allow-Origin]
当请求不同域名下的一些文件的时候,例如:src='******.svg' 有时候会出现这样的提示 已阻止跨源请求:同源策略禁止读取位于*的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。 Font from origin '' has been blocked from loading by Cross-Origin Reso
使用Vue配合Express框架构建SPA应用遇到的"Access-Control-Allow-Origin"问题
问题:Access-Control-Allow-Origin Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/xxx?page=1' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origi...
使用谷歌插件Allow-Control-Allow-Origin解决跨域问题
一般下载这个插件Allow-Control-Allow-Origin需要翻墙或者在csdn上下载,需要积分,不过在火狐浏览器里的附加组件可以下载,在火狐浏览器上就可以跨域访问了。...
已阻止跨源请求:同源策略禁止读取位于...的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。
今天使用jsonp遇到个奇怪的问题,本地的就是不报错,可是上传上去就是报下面的错误: 已阻止跨源请求:同源策略禁止读取位于 http://www.***.cn/getcode.aspx?id=2222222222222222&callback=jsonp1450266336118 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。 明明
自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题
什么是Access-Control-Allow-Origin Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。 它定义了该资源允许被哪个域引用,或者被所有域引用(google字体使用*表示字体资源允许被所有域引用)。 什么是资源跨域权限 当两个域具有相同的协议(
Access-Control-Allow-Origin跨域问题的终极解决,给自己做备份
Access-Control-Allow-Origin跨域问题的终极解决,给自己做备份,内含允许访问特定域名或多个域名
CORS跨域时axios无法获取服务器自定义的header信息 - 番外篇
CORS跨域时axios无法获取服务器自定义的header信息? 重要阐述: 用axios发送请求获取reponse header中的数据,需要提前在后台添加设置过滤器头部配置、自定义头部属性、并打开过滤器。 然后就是前端发送请求,然后获取reponse headers里面的自定义属性。 原来在默认的请求上, 浏览器只能访问以下默认的 响应头:(如下例) Cache-Control Conte...
解决跨域的两种方案JSONP和CORS
讲跨域之前,我们先来讲同源策略(SOP),同源策略是网景公司提出的一个著名安全策略。所谓同源就是域名、协议、端口相同。例如http://www.12306.cn中,http就是超文本传输协议,12306就是域名,cn就是端口。如果两个资源需要通信,那么他必须满足SOP。而在前端中我们使用ajax进行数据请求。 如果资源不同域,那么我们在使用ajax请求数据的时候,就会报错,表示拒绝访问。那如
spring Cors拦截流程
Cors跨域拦截实现过程所有的请求都进入CorsFilter的doFilterInternal方法org.springframework.web.filter.CorsFilter//在这里过滤所有请求@Overrideprotected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, ...
ASP.NET跨域请求中的问题【CORS】
浏览器的安全策略会阻止网页向另一个站点发送ajax请求,同时也会阻止恶意站点从另一个站点读取数据。这种限制被称作“同源策略”。然而有时我们需要从一个站点访问另一个站点,比如从一个站点访问你的WebApi接口。 跨域资源共享-Cross Origin Resource Sharing(CORS)是一项W3C标准,允许服务端释放同源策略,使得服务端在接受一些跨域请求的同时拒绝其他的跨域请求。相比较早期
WCF Restful调用跨域解决方案
目前很多项目中CRM更多扮演一个纯后台管理系统,用户更多的操作是在移动端执行,不管是安卓还是IOS甚至是H5。这里以H5为例,CRM提供数据接口,移动web端来调用接口进行数据处理,这里就会涉及到一个浏览器端的跨域问题,之前避免跨域移动端会做一个接口转发层,这样中间就又多了一层,但有了CORS后这个问题就简单了。    这里简述下wcf中是如何设置的,很简单,只需在Global文件中添加如下代码即
解决 ionic 中的 CORS(跨域) 问题
缘起ionic社区里的(ionic serve)时的跨域问题,有人在这里翻译了一篇文章,洋洋洒洒,从理论到实际,说的都很好。 不过有人在底下的评论里说的更加到位:   搜索了一下,果然啊,方便啊
ionic跨域(CORS)问题
解决 ionic 中的 CORS(跨域) 问题【译】 如果你通过 ionic serve 或者 ionic run 命令使用或 live reload 或者访问过外部 API 结点,那么你肯定遇到过 CORS 问题,譬如下面这样: XMLHttpRequest cannot load http://api.ionic.com/endpoint. No 'Access-Co
Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
谷歌跨域扩展插件,保障跨域请求成功,Allow-Control-Allow-Origin最新谷歌跨域扩展插件下载
CORS跨域资源共享你该知道的事儿
“唠嗑之前,一些客套话” CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共享这个话题,大牛怡情小牛巩固,把这碗前端经久不凉的大碗茶,再细细的品一品。 “JSONP直接了当很豪爽,CORS细吮慢品大补汤” 在咱们前端的日常工作中,跨域比较常用的方式就是JSONP,JSONP呢就是通
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 ios培训郑州真聘 python学习之通配符%s