为啥 Chrome 会删除 localhost:80 的端口号？

Posted 2023-03-04

【中文标题】为啥 Chrome 会删除 localhost:80 的端口号？

【英文标题】：Why does Chrome remove port number for localhost:80?为什么 Chrome 会删除 localhost:80 的端口号？

【发布时间】：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

【参考方案1】：

端口 80 是万维网 (www) 已使用的默认端口。是否有理由需要专门使用这个端口号（我猜是为了本地开发）？

【讨论】：

不，没有特别的原因。我正在使用来自离岸团队的继承代码库，这是我遇到的一个问题。我不知道这是否足以回答为什么 Chrome 会去掉端口号。 chrome 是否限制该端口，因为它被“万维网”使用？

@rweber87 我不是 100% 肯定我只知道它使用这个端口来执行 HTTP 请求。所以，我认为这可能与它有关。您也可以尝试使用 HTTPS 端口 443，看看是否遇到类似问题。

我已经将端口切换到 8080（参见上面的示例），这会将报告保留在请求标头中并解决了问题。