为什么我的 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吗？

标签： javascript node.js express backend

【解决方案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);

【讨论】：