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

我有一个设置

前端服务器(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 --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/
)
658630 次浏览
小开

如果你正在使用express，你可以使用歌珥包来允许这样的CORS，而不是编写中间件;

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


app.use(cors());


app.get(function(req,res){
res.send('hello');
});
小开
最佳答案

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

  1. 访问控制-允许起源通配符子域，端口和协议
  2. 跨源资源共享与凭证 .

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

小开

如果你正在使用CORS中间件，并且你想发送withCredential布尔值为true，你可以这样配置CORS:

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

试一试:

const cors = require('cors')


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


}
app.use(cors(corsOptions));
小开

(编辑)先前推荐的附加组件不再可用，您可以尝试另一个

对于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的(歌珥，绿色或红色)图标并填充适当的文本框，将您的url模式添加到Intercepted URLs。这里要添加的用于http://localhost:8080的URL模式示例是:*://*

小开

如果你想要允许所有的起源并保持真实的凭证，这对我来说是可行的:

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

这对我来说在开发过程中是可行的，但我不能建议在制作过程中，这只是一种不同的完成工作的方式，虽然还没有提到，但可能不是最好的。总之是这样的:

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

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

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

小开

angular有这个问题，在请求执行之前，使用一个认证拦截器来编辑头。我们使用api-token进行身份验证，所以我启用了凭据。现在，似乎没有必要/不允许了

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
req = req.clone({
//withCredentials: true, //not needed anymore
setHeaders: {
'Content-Type' : 'application/json',
'API-TOKEN' : 'xxx'
},
});
    

return next.handle(req);
}

除此之外，目前还没有副作用。

小开

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

从cors官方文档中找到在这里:

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

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

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中间件中启用凭据为真，否则我们不能设置饼干。还有一些用例可以访问所有的原点。在这种情况下，我们应该用，

{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())
}
}
}
小开

NETLIFY和HEROKU的CORS错误

实际上，如果上面的方法都不适合你，你可以试试这个。 在我的例子中，后端运行在Heroku上，前端托管在netlify上。 在前端的.env文件中，server_url被写成

REACT_APP_server_url = "https://ci-cd-backend.herokuapp.com"

在后端，我所有的API调用都写成，

app.get('/login', (req, res, err) => {});

所以，你需要做的唯一改变是，在路由的末尾添加/api，

frontend base url是这样的，

REACT_APP_server_url = "https://ci-cd-backend.herokuapp.com/api"

后端api应该写成，

app.get('/api/login', (req, res, err) => {})

这在我的案例中起了作用，我相信当前端托管在netlify上时，这个问题是特别相关的。


提交答案