简体   繁体   English

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

[英]Why do the CORS settings for my Express.js backend not work?

I am trying to set CORS for my Express.js backend.我正在尝试为 Express.js 后端设置 CORS。 Since I have a local and a remote version of the front end I want to allow a couple of URLS access to the backend.由于我有一个本地和远程版本的前端,我想允许几个 URLS 访问后端。 I have tried to use "*" and var cors = require('cors') app.use(cors()) but I get我曾尝试使用 "*" 和var cors = require('cors') app.use(cors())但我得到

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.当凭据标志为真时,不能在 Access-Control-Allow-Origin 中使用通配符。

I have tried using the dynamic settings for cors(), but there were no examples how to use it with Express's routes.我曾尝试使用 cors() 的动态设置,但没有示例如何将其与 Express 的路由一起使用。 I am now trying to create my own white list check with the code below but now I am getting我现在正在尝试使用下面的代码创建自己的白名单检查,但现在我得到了

No 'Access-Control-Allow-Origin' header is present on the requested resource.请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin ' http://localhost:5000 ' is therefore not allowed access.因此,不允许访问 Origin ' http://localhost:5000 '。 The response had HTTP status code 500.响应的 HTTP 状态代码为 500。

What am I doing wrong?我究竟做错了什么?

UPDATE: It looks like the if statement is blocking the headers from being added so I tried to remove it to see what is happening with res.header('Access-Control-Allow-Origin', req.get("origin"));更新:看起来 if 语句阻止添加标头,因此我尝试将其删除以查看res.header('Access-Control-Allow-Origin', req.get("origin")); It is now giving me它现在给了我

Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. Credentials 标志为“true”,但“Access-Control-Allow-Credentials”标头为“”。 It must be 'true' to 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);

This ultimately came down to a spelling/understanding error.这最终归结为拼写/理解错误。 I was trying to get the request origin by using req.headers.Origin .我试图通过使用req.headers.Origin来获取请求来源。 Turns out there is no 'Origin' in headers, I had to use req.headers.origin instead.原来标题中没有“起源”,我不得不使用req.headers.origin代替。 The code bellow will work, and let you use multiple urls for CORS, it does not yet easily handle something like http://localhost:5000/route or a situation where the provided origin isn't in the list.下面的代码将起作用,并让您对 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);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM