在 Node.js Express.js 服务器中添加标头后，Chrome 中仍然出现 CORS 错误
Posted
技术标签:
【中文标题】在 Node.js Express.js 服务器中添加标头后，Chrome 中仍然出现 CORS 错误【英文标题】：Still getting CORS error in Chrome after adding headers in Node.js Express.js server 【发布时间】：2018-12-12 06:24:41 【问题描述】：我正在尝试对XML 文件执行简单的GET 请求，但我遇到了CORS 错误。
我尝试了多种解决方案，包括在我的server.js 文件中手动添加标题，以及使用cors NPM 包。使用这两种方法，如果我点击 Postman 中的端点，我可以看到附加到请求的标头以及响应。
但在 Google Chrome 中，标头并未附加到请求中。这是我的index.html 文件中的代码：
<body>
<h1>test</h1>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<!-- <script src="./server.js"></script> -->
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', http://11.111.111.111/web/data/data.xml, true);
xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
xhr.withCredentials = true;
xhr.send(null);
</script>
</body>
请注意，我已将尝试从中获取信息的 XML 页面的 URL 替换为占位符。
这是我的server.js 文件中的代码：
var express = require("express");
var bodyParser = require("body-parser");
var path = require("path");
var cors = require('cors')
// Sets up the Express App
var app = express();
var PORT = 3000;
app.use(cors())
app.options('*', cors()) // include before other routes
// Sets up the Express app to handle data parsing
app.use(bodyParser.urlencoded(
extended: true
));
app.use(bodyParser.json());
// Routes
app.get("/test", function(req, res)
//res.set(
// 'Access-Control-Allow-Origin': ['*'],
// 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
// 'Access-Control-Allow-Headers': 'Content-Type'
// );
res.sendFile(path.join(__dirname, "./index.html"));
console.log('hit me')
console.log(res);
);
app.get("/", function(req, res)
res.send('Houston, we have a problem.')
);
// Starts the server to begin listening
app.listen(PORT, function()
console.log("App listening on PORT " + PORT);
);
这是邮递员输出的屏幕截图
我将xhr.setRequestHeader('Access-Control-Allow-Origin', '*') 添加到我的客户端xhr 请求中，然后我切换到使用cors 包。现在我得到这个错误：
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我按照npm cors 文档中的说明添加了app.options('*', cors()) // include before other routes，但我仍然遇到同样的错误。但是，标头附加到开发工具中的请求。我更新了这篇文章中的代码和屏幕截图以反映这些变化。
来自开发工具的屏幕截图：
【问题讨论】：
您是否尝试过添加 Chrome CORS 扩展程序？ chrome.google.com/webstore/detail/allow-control-allow-origi/… @John 虽然该插件在理论上听起来很有用，但它只会在您部署到 prod 之后才会出现问题。 是的 它适用于扩展，但我需要它在没有它的情况下工作。 是的，所以...您没有在静态文件的响应中设置 CORS 标头。您只将它们设置在 /test 路线上。 @KevinB 感谢您引导我朝着正确的方向前进。 【参考方案1】：如果只是用于本地测试，试试这个：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi 或试试这个https://www.npmjs.com/package/cors。
从'cors'导入cors
app.use(cors())
【讨论】：
是的，我尝试过使用cors npm 包，但我遇到了同样的问题【参考方案2】：
终于收到了该团队的回复，事实证明服务器已配置为阻止所有 cors 请求。
【讨论】：
以上是关于在 Node.js Express.js 服务器中添加标头后，Chrome 中仍然出现 CORS 错误的主要内容，如果未能解决你的问题，请参考以下文章
我可以在 Node.js/Express 中动态导入 TypeScript 模块吗？
Node.js - Express.js JWT 总是在浏览器响应中返回一个无效的令牌错误
在 Node.js/Express.js 中，如何将 JSON 对象从服务器传输到客户端？
IBM 向 Node.js 捐赠 Express 框架，为 Express 丑闻画上了句号