【发布时间】：2019-08-26 09:26:54
【问题描述】：
我正在从我的前端 React 应用程序发出一个请求，并在我的服务器上使用 localhost:80 运行它。在浏览器中查看请求和标头时，Chrome 会自动删除导致 CORS 错误的端口号。为什么 Chrome 会去掉这个端口号？在这种情况下，最佳实践是什么？我只是将端口从 80 更改为 8080 并解决了问题。
我已将所有类型的 HTTP 请求的标头设置为 Access-Control-Allow-Origin，但这似乎并没有解决问题。这也让我相信请求标头中缺少端口是问题的根本原因（这就是我将其从 80 更改为 8080 的原因）。
app.get('*', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed
res.setHeader('Access-Control-Allow-Credentials', true);
}
这里没有工作端口
app.listen(80, err => {
if (err) {
return console.error(err);
}
console.log(
=====================================================
-> Server (${chalk.bgBlue('Hot reload')}) ???? (running) on ${chalk.green(
'localhost',
)}:${chalk.green('80')}
=====================================================
,
);
^^这个不起作用，chrome删除了URL中的端口
这里改变了端口
app.listen(8080, err => {
if (err) {
return console.error(err);
}
console.log(
=====================================================
-> Server (${chalk.bgBlue('Hot reload')}) ???? (running) on ${chalk.green(
'localhost',
)}:${chalk.green('8080')}
=====================================================
,
);
^^这个工作正常，chrome 将端口留在 URL 中
我期待 CORS 允许请求通过，即使没有指定端口，但这并没有发生。我正在运行 node.js 服务器，后端使用 graphql，前端使用 react 框架，cors 版本是 "cors": "^2.8.4"
【问题讨论】：
-
为透明起见，我没有测试其他浏览器是否仍然存在相同的行为。我假设这是一个仅限 chrome 的问题，但我尚未验证。
-
您的操作假设错误。所有浏览器的行为方式都相同。如果端口为 80 且协议为 http，浏览器不会从原始值或 URL 中“剥离”端口号。在这种情况下，浏览器只是不会在 UI 中的某些地方显示端口号——因为如果他们这样做了，它们将一直为大多数 http 站点显示它，因为绝大多数网站都是从端口 80 提供服务的.
-
您遇到的任何问题的原因都不是由于 Chrome 从原始值或 URL 中“剥离”了端口 80。但很难知道真正的问题可能是什么，因为目前写的问题并没有说明问题的细节。你说，“Chrome 会自动删除导致 CORS 错误的端口号”。什么是确切的 CORS 错误？你说，“我期待 CORS 允许请求通过，即使没有指定端口，但没有发生这种情况”*。那么究竟会发生什么呢？
-
@sideshowbarker 控制台中记录的错误如下：从源 'localhost' 获取在 'api-dev.fliptrx.com' 处的访问已被 CORS 策略阻止：否 'Access-Control-Allow -Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
-
我断定它是浏览器剥离端口号的原因是因为错误消息仅将来源显示为
localhost而不是localhost:80
标签： node.js google-chrome cors localhost port