如何在 express 中正确管理 CORS 策略？

Question

我正在尝试允许从任何地方访问。

我尝试过使用应用中间件：

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader("Access-Control-Allow-Headers", "*");
  next();
});

我曾尝试在路线中使用它：

app.post('/login',function(req,res){
var login   = req.body;
var sess    = req.session;

if (!login.email && !login.pwd){    
    return res.status(401);
}
res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Headers", '*');
.... more code here

两者都不起作用。我不断收到错误消息：“对预检请求的响应未通过访问控制检查：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。”

在服务器的下方，我们对另一条路线使用类似的代码，它可以工作：

app.post('/questar',function(req,res){
//allow xhr post from retireup domains
var cors = {
    origin: "https://www.website.com";
};
res.header("Access-Control-Allow-Origin", cors.origin);
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.type('application/json');

我无法区分代码之间的区别，但只有一组有效。任何想法为什么？这似乎是一个不应该如此复杂的问题。谢谢

Answer 1

应用“cors”中间件后。您应该在“localhost:”之前传递“http://”。在由 Axios 发送到的 url 中，如下所示：

axios.get("http://localhost:8080/api/getData")
.then(function (response) {
this.items= response.data;
}).catch(function (error) {
console.log(error)
});

Answer 2

MDN 非常简短地解释了服务器应如何响应Preflight Request。

您通过处理 HTTP OPTIONS 方法来处理 CORS 预检请求（就像您处理 GET 和 POST 方法一样）在处理同一路由上的其他请求方法之前：

app.options('/login', ...);
app.get('/login'. ...);
app.post('/login'. ...);

在您的情况下，这可能就像将您的 app.use() 调用更改为 app.options() 一样简单，将路由作为第一个参数传递，设置适当的标头，然后结束响应：

app.options('/login', function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader('Access-Control-Allow-Methods', '*');
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.end();
});
app.post('/login', function (req, res) {
  ...
});

Answer 3

在路由之前配置 CORS 内容，而不是在路由内部。

在这里，像这样（来自enable-cors.org）：

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

app.get('/', function(req, res, next) {
  // Handle the get for this route
});

app.post('/', function(req, res, next) {
 // Handle the post for this route
});

我总是在我的 Express+Angular 应用程序中这样配置它，它工作得很好。

希望对你有帮助。

Answer 4

首先安装，来自 npm 的“cors”包：npm i -S cors

然后在您的 express 服务器中启用它。

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

const app = express();
app.use(cors());

...

Answer 5

遵循一些标准节点项目，CORS 配置下方对我始终有效。它需要 npm 包“cors”。 注意： 来源 * 表示启用对任何来源的响应并以状态码 200 回复。如果需要将其限制为一个域，请相应地更新来源。例如：[来源：'http://exampleui.com']

var cors = require('cors');
var corsOptions = {
    origin: '*',
    optionsSuccessStatus: 200,
  }
app.use(cors(corsOptions));
app.use(express.json())

Answer 6

按照其他人的答案，这对我有用：

res.setHeader("Access-Control-Allow-Origin", 'http://myDomain:8080');
res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

Answer 7

您必须将域名列入白名单以避免收到 cors 错误消息。

有一个叫cors的插件，用这个命令把它安装到你的项目中

npm i cors

安装后使用此代码从您的项目中删除与 cors 相关的错误。

const cors = require('cors');

const corsOption = {
    credentials: true,
    origin: ['http://localhost:3000', 'http://localhost:80']
}

app.use(cors(corsOption));

在origin 部分，您可以传递任何域以将其列入白名单。如果您想将所有域名列入白名单，而不是传递 urls 数组。你可以在那边传'*'。

例如：origin: '*'

credentials：配置 Access-Control-Allow-Credentials CORS 标头。设置为true传递header，否则省略。