WSL2，无法在Windows浏览器上访问本地主机的Node.js服务器

Question

我有一个带有Linux子系统（Ubuntu-20.04）的Windows 10电脑，正在使用WSL2。当我初始化前端项目（vue项目）并运行npm run serve时，一切正常。应用程序在localhost:8080上运行，就像我预期的那样。但是，当我为该应用程序创建后端（使用Node.js和Express的新项目）时，我启动了简单服务器，并且在终端中看起来很好，但是当我想在浏览器中转到localhost:5000查看基本的Hello World时，页面会加载一段时间，然后显示网页未发送任何数据。

这是我的app.ts：

import express, { Application, Request, Response, NextFunction } from 'express'
import bodyParser from 'body-parser'
import cors from 'cors'
import 'reflect-metadata'

const app: Application = express()
const port = 5000

app.use(cors)
app.use(bodyParser.json({ limit: '20480kb' }))

app.get('/', (req, res) => {
    res.send('Hello!')
})

const server = app.listen(port, 'localhost', () => console.log(`The server is running on port ${port}.`))

这是我的package.json scripts代码（将typescript编译为javascript正常运行）：

"scripts": {
    "start": "nodemon dist/app.js",
    "build": "rm -rf dist/ && tsc -w",
    "commit": "npx git-cz"
  }

这是我的后端终端，一切正常运作：

https://istack.dev59.com/pJIb9.webp

我尝试使用netstat查看连接情况：

https://istack.dev59.com/n5naM.webp

我的问题是无法在Web浏览器上访问服务器，请帮忙。

- Jan Vejnarek

---

如果您尝试打开http://localhost:5000/，会出现什么错误？我认为我可以帮助您。 - Luis Paulo Pinto

它是否明确使用 127.0.0.1 而不是 localhost？ - eirirlar

Answer 1

如果你明确定义了PORT，那么我遇到的问题和你一样，尝试在WSL2上运行一个基本的Node-Express应用程序。基本上是一个网络问题，因此为我解决了问题，定义了PORT和HOST。 以下是代码。

const express = require('express');
const app = express();
const PORT = 3000;
const HOST = '0.0.0.0';

app.get('/', (req, res) => res.send('hello world'));
app.listen(PORT, HOST, () => console.log('server running'));

我在浏览器上输入localhost:3000时可以正常运行。

由于某种原因，当我更新了Docker桌面后，这种方法失效了。另一个有效的解决方案是在Windows中打开端口。 使用管理员特权的powershell：

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=192.168.x.x

在“connectaddress”中，您必须放入您的IP地址（wsl2），您可以通过ifconfig获得。

- lsarteaga

---

将PORT和HOST添加到app.listen()中解决了我的问题，谢谢！ - Felipe Windmoller

Answer 2

在WSL2上运行以下命令：

cat /etc/resolv.conf

使用nameserver代替localhost

- Zakaria Aarab

Answer 3

我知道这是一个老问题，但这听起来非常类似于我也遇到过的问题，并且我成功解决了它（详细信息 在此处），尽管花费了我很长时间。 你有额外的Web服务器并且不得不解决“CORS约束”使得情况更加可疑。 你正在使用某种代理吗？例如devServer？如果是这样，那可能是阻止请求的原因，因为它们看起来与代理所期望的地址不同。

我的解决方案（我的是vue.js应用程序）是调整vue.config.js以限制代理的范围，从这里开始：

devServer: {
  proxy: 'http://localhost:5000/',
  host: 'localhost'
},

转换为：

devServer: {
  proxy: {
    "/upload": {
      target: "http://localhost:5000"
    }
  }

如果您遇到了类似的问题，希望这可以帮助到您。

- Luca P.

Answer 4

你需要在Windows端创建一个输入规则并打开该端口吗？进入安全高级设置，创建一个允许端口5000通过的输入规则。我正在使用Windows 10和WSL2，并使用NodeJS和Express - 这就是我正在做的事情，它可以正常工作。

- alernerdev

Answer 5

我的第一反应是您遇到了NAT'd WSL2接口的问题（与默认桥接的WSL1不同），但这并不完全符合您的问题，因为：

1. 您似乎可以连接，但没有数据。如果一开始就无法连接，浏览器会显示“连接被拒绝”。

2. 本地主机名无论如何都不应该有任何NAT问题。

我不是Express的专家，但我认为您在这里看到的可能与您的中间件使用有关。我认为，为了让body-parser工作，您可能需要解析POST，但您的代码（以及浏览器访问）仅提供GET方法。请参见此问题/答案以获取更多详细信息。

我认为您需要提供一个POST方法，并使用类似Postman或curl的工具进行测试。

如果您只需要排除任何WSL2问题，请尝试Express "Hello, World"。

- NotTheDr01ds

Answer 6

根据@lsarteaga的回答，这对我有用。 我想知道是否有更好的方法来解决这个问题。

- Khaled Boussoffara