NodeJS 在express js中允许多个CORS域

5jvtdoz2  于 2023-04-05  发布在  Node.js
关注(0)|答案(7)|浏览(132)

如何在express中以简化的方式允许CORS的多个域。
我有

cors: {
        origin: "www.one.com";
    }

    app.all('*', function(req, res, next) {
            res.header("Access-Control-Allow-Origin", cors.origin);
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
        });

origin中只提到一个域时,此方法有效
但是如果我想让origin作为域的数组,并且我想允许origin数组中的所有域的CORS,我会有这样的东西-

cors: {
            origin: ["www.one.com","www.two.com","www.three.com"];
        }

但问题是下面的代码不起作用-

app.all('*', function(req, res, next) {
                res.header("Access-Control-Allow-Origin", cors.origin);
                res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                next();
            });

如何通过cors.origin使res.header接受域数组?

moiiocjp

moiiocjp1#

我推荐使用cors模块:https://www.npmjs.org/package/cors它为您做了这类事情-检查“配置CORS w/ Dynamic Origin”部分

ldxq2e6h

ldxq2e6h2#

Access-Control-Allow-Origin的值必须是一个字符串,而不是一个列表。因此,为了使其动态,您需要从Origin HTTP请求头中获取请求源,并将其与授权源数组进行检查。如果存在,则将该源添加为Access-Control-Allow-Origin头的值;否则,使用默认值,这将禁止未经授权的域访问API。
没有本地实现。您可以使用下面的代码自己完成。

cors: {
  origin: ["www.one.com","www.two.com","www.three.com"],
  default: "www.one.com"
}

app.all('*', function(req, res, next) {
  const origin = cors.origin.includes(req.header('origin').toLowerCase()) ? req.headers.origin : cors.default;
  res.header("Access-Control-Allow-Origin", origin);
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
7gcisfzg

7gcisfzg3#

使用Node,cors中间件,确保你离开/关闭的url,否则cors可能会失败,如果在浏览器中显示的url没有它.

var corsOptions = {
origin: ["http://www.example.com/","http://localhost:3000"],
optionsSuccessStatus: 200 // For legacy browser support
}

app.use(cors(corsOptions));

失败,并会给予我的cors错误,因为浏览器将显示/读取的网址为http://www.example.com,其中下面的工作和更具包容性,应该为http://www.example.com和任何超出,即http://www.example.com/http://www.example.com/blogs/1等工作

var corsOptions = {
origin: ["http://www.example.com","http://localhost:3000"],
optionsSuccessStatus: 200 // For legacy browser support
}

app.use(cors(corsOptions));
cotxawn7

cotxawn74#

事实上,Access-Control-Allow-Origin header应该与Origin header的值相同,只要你想允许它。
基于你的代码

cors: {
    origin: ["www.one.com","www.two.com","www.three.com"]
}


app.all('*', function(req, res, next) {
            let origin = req.headers.origin;
            if(cors.origin.indexOf(origin) >= 0){
                res.header("Access-Control-Allow-Origin", origin);
            }         
            res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            next();
        });
icnyk63a

icnyk63a5#

最简单的方式

const cors = require("cors");
app.use(cors({ origin: ["http://localhost:3000", "https://origin2.com"] }));

这将允许来自localhost:3000origin2.com的请求

kulphzqa

kulphzqa6#

我想分享我的解决方案:!!!如果你使用远程服务器并在本地主机(webpack或其他开发环境)上开发,这些代码可以工作。

let ALLOWED_ORIGINS = ["http://serverabc.com", "http://localhost:8080"];
app.use((req, res, next) => {
    let origin = req.headers.origin;
    let theOrigin = (ALLOWED_ORIGINS.indexOf(origin) >= 0) ? origin : ALLOWED_ORIGINS[0];
    res.header("Access-Control-Allow-Origin", theOrigin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
})
pbgvytdp

pbgvytdp7#

这些都是很好的答案,但是如果你使用typescript和.env作为origins数组,你可能会遇到问题。
heres更多背景信息,谢谢@Alejandro

相关问题