为啥我的 Express.js 后端的 CORS 设置不起作用?

Posted

技术标签:

【中文标题】为啥我的 Express.js 后端的 CORS 设置不起作用?【英文标题】:Why do the CORS settings for my Express.js backend not work?为什么我的 Express.js 后端的 CORS 设置不起作用? 【发布时间】:2015-05-25 14:57:44 【问题描述】:

我正在尝试为我的 Express.js 后端设置 CORS。由于我有前端的本地和远程版本,我想允许几个 URLS 访问后端。我曾尝试使用“*”和var cors = require('cors') app.use(cors()),但我得到了

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

我尝试过使用 cors() 的动态设置,但没有示例如何将它与 Express 的路由一起使用。我现在正在尝试使用下面的代码创建自己的白名单检查,但现在我得到了

请求中没有“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:5000” 使用权。响应的 HTTP 状态代码为 500。

我做错了什么?

更新: 看起来 if 语句阻止了添加标头,所以我尝试将其删除以查看 res.header('Access-Control-Allow-Origin', req.get("origin")); 发生了什么,它现在给了我

Credentials 标志为“true”,但“Access-Control-Allow-Credentials” 标题是''。必须为“true”才能允许凭据。

var whiteList = 
    "http://localhost:5000": true,
    "https://example-url.herokuapp.com": true
;
var allowCrossDomain = function(req, res, next)     
        if(whiteList[req.get('Origin')])            
            res.header('Access-Control-Allow-Credentials', true);
            res.header('Access-Control-Allow-Origin', req.get('Origin'));
            res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
            res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Origin, Accept');        
            next();
         
;
app.use(allowCrossDomain);

【问题讨论】:

“响应的 HTTP 状态代码为 500” - 听起来您的标头根本没有发送,因为您设法在代码中创建了错误。跨度> 您在哪些浏览器中看到此错误?尝试多个。 @talves Safari 也有同样的结果。 #CBroe 我有一种感觉与 'if(allowedURLS.indexOf(req.get("origin")) > -1) ' 更具体地说是 'req.get("origin" )' 我只是不知道为什么。 app.use(allowCrossDomain) above all otherapp.use吗? 【参考方案1】:

这最终归结为拼写/理解错误。我试图通过使用req.headers.Origin 来获取请求来源。原来标题中没有“Origin”,我不得不改用req.headers.origin。下面的代码将起作用,并允许您对 CORS 使用多个 url,它还不能轻松处理 http://localhost:5000/route 之类的内容或提供的来源不在列表中的情况。

var whiteList = 
    "http://localhost:5000": true,
    "https://example-url.herokuapp.com": true
;
var allowCrossDomain = function(req, res, next)     
        if(whiteList[req.headers.origin])            
            res.header('Access-Control-Allow-Credentials', true);
            res.header('Access-Control-Allow-Origin', req.headers.origin);
            res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
            res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, Origin, Accept');        
            next();
         
;
app.use(allowCrossDomain);

【讨论】:

以上是关于为啥我的 Express.js 后端的 CORS 设置不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

带有 Express.js 和 jQuery.ajax 的 CORS

CORS:为啥我的浏览器不发送 OPTIONS 预检请求?

在带有 Node 和 Express 的 IE10 中使用 CORS 的安全错误

由于 Spring 5 中的 Access / CORS 问题,无法访问我的后端的 URL [重复]

Express.js 对 Angular CORS 错误的响应

javascript Express.js CORS访问控制允许