Express 应用中请求的资源上不存在"访问控制允许源"标头

Question

我有一个Express应用程序和我的Web应用程序在同一台服务器上运行。我正试图向我的Express应用程序发出XMLHttpRequest，但我收到了以下错误：

Access to XMLHttpRequest at 'http://10.0.0.222:9999/' from origin 'http://10.0.0.222:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

尽管在我的应用程序中，这个标题显然是"存在"的。应用程序代码：

var cors = require('cors')
const util = require('util');
var inspect = require('eyes').inspector({maxLength: false})
const express = require('express');
var bodyParser = require('body-parser')
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
var corsOptions = {
origin: 'http://10.0.0.222:8080',
optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
}
app.post('/', cors(corsOptions), function (req, res) {
console.dir(req.body, {depth: null});
res.send('a');
});
const PORT = process.env.PORT || 9999;
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}...`);
});

XMLHttpRequest代码：

var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://10.0.0.222:9999', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(goodJSON)

为什么即使原始选项中包含我的web应用程序主机，我仍然会出现此错误？

Answer 1

它不起作用，因为您已将标头放置在基本路由中，即/。

在解析路由之前，必须检查标头。在您的情况下，路由已经解析，然后您正在应用cors标头。

使用此：

app.use('/', cors(corsOptions));      or     app.use(cors(corsOptions));
app.post('/', function (req, res) {
console.dir(req.body, {depth: null});
res.send('a');
});

在app.use中应用cors将添加标头。之后，路径将被解决，它不会抛出错误

Answer 2

错误消息显示：

对飞行前请求的响应

飞行前是一个OPTIONS请求，用于请求进行实际请求的权限。

您的处理程序只接受POST请求，因此OPTIONS请求上没有所需的标头。

该文件专门涵盖飞行前请求：

app.options('/', cors(corsOptions));