首页 > 解决方案 > 为什么 Chrome 会删除 localhost:80 的端口号?

问题描述

我正在从我的前端 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"

标签: node.jsgoogle-chromecorslocalhostport

解决方案


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


推荐阅读