PUG+Express前后端Node.js服务AJAX请求无法连通问题求助

问题根因 #

你前端代码里写的localhost:4000是相对于访问页面的用户本地浏览器生效的，浏览器会尝试访问用户自己设备的4000端口，而不是你服务器上的4000端口，自然会请求失败。

解决方案（开发环境适用） #

注意：以上方案仅适用于开发环境，生产环境建议使用Nginx反向代理统一路径、避免跨域问题。

方案1：前端Express服务加代理（最推荐，不需要改后端配置，也不会有跨域问题） #

• 给运行在8000端口的前端Express服务安装代理中间件：

npm install http-proxy-middleware

• 在前端服务的入口文件index.js中添加代理配置，把指定路径的请求转发到本地4000端口的后端服务：

const { createProxyMiddleware } = require('http-proxy-middleware');
// 所有/api开头的请求都会转发到后端
app.use('/api', createProxyMiddleware({
  target: 'http://localhost:4000',
  changeOrigin: true,
  pathRewrite: { '^/api': '' } // 可选，如果后端接口没有/api前缀就加这个配置
}));

• 修改前端login.js中的服务地址配置：

const serverurl = "/api";

方案2：后端开CORS，接口地址写服务器公网地址 #

• 给运行在4000端口的后端Express服务安装CORS中间件：

npm install cors

• 在后端服务入口App.js中引入CORS：

const cors = require('cors');
app.use(cors()); // 开发环境直接允许所有跨域请求即可

• 确保后端服务监听的是0.0.0.0而非仅127.0.0.1，否则公网无法访问4000端口
• 修改前端login.js中的服务地址配置，替换为你服务器的公网IP或域名：

const serverurl = "http://something.mydomain.com:4000";

方案3：临时调试用浏览器跨域插件 #

如果只是自己本地临时调试，可以直接安装Chrome/Edge的跨域插件（比如Allow CORS: Access-Control-Allow-Origin），开启后可临时绕过浏览器跨域限制，仅适合本地调试使用。

内容的提问来源于stack exchange，提问作者Matt Penfold