Express 应用程序中请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】Express 应用程序中请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource in Express app

【发布时间】：2021-08-21 14:04:45

【问题描述】：

我有一个 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)

为什么即使源选项包含我的网络应用程序的主机，我仍然会收到此错误？

【问题讨论】：

这是help吗？

@ApoorvaChikara 不，仍然出现同样的错误。尝试将 Access-Control-Allow-Origin 设置为我的网络应用程序主机和“*”，但两者都没有区别

根据错误消息，预检请求 (OPTIONS) 中不存在标头，而不是主请求 (POST)。那是因为您在 app.post 调用中添加了中间件，该调用仅对 POST 作出反应，而不对 OPTIONS 作出反应。 This 应该解释一下。

【参考方案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 将添加标题。之后该路径将被解析并且不会抛出错误

【讨论】：

"它不起作用，因为您已将标头放置在基本路由中，即 /。" — 这是他们向其发出请求的 URL。

是的，我明白了。请编辑您认为合适的答案，因为我的英语不好

【参考方案2】：

错误信息说：

对预检请求的响应

preflight 是一个 OPTIONS 请求，用于请求允许发出实际请求。

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

文档具体涵盖preflight requests：

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