跨局域网访问Web应用时遭遇CORS拦截问题求助

问题根源 #

你的核心问题有两个：

1. 前端API请求地址硬编码错误：前端代码里把后端地址写死成了http://localhost:3001/api/data。当其他设备通过服务器IP访问前端时，浏览器会向该设备自身的localhost:3001发起请求，而不是服务器的后端服务，自然拿不到数据。
2. 同源策略拦截：即使请求能到服务器后端，前端所在的http://<服务器IP>:3000和目标地址http://localhost:3001属于不同源（IP不同），浏览器会触发同源策略拦截请求。

直接用服务器IP访问后端API正常，说明后端服务本身是正常的，问题出在前端请求地址和跨域配置上。

解决方案 #

1. 修正前端API请求地址（关键） #

不要硬编码localhost，而是动态适配当前前端的访问地址：

• 方法一：使用环境变量
  在React项目根目录创建.env.development（开发环境）和.env.production（生产环境）文件，配置后端地址：

  # .env.development
  REACT_APP_API_URL=http://<你的服务器IP>:3001
  

  前端请求时读取环境变量：

  const apiUrl = `${process.env.REACT_APP_API_URL}/api/data`;
  // 发起请求
  fetch(apiUrl)
    .then(res => res.json())
    .then(data => console.log(data));
  

• 方法二：动态获取主机地址
  通过window.location获取当前前端的主机地址，替换端口后拼接API路径：

  // 从当前前端地址提取服务器IP，替换前端端口3000为后端端口3001
  const apiHost = window.location.origin.replace(':3000', ':3001');
  const apiUrl = `${apiHost}/api/data`;
  

2. 配置Express的CORS权限 #

即使修正了请求地址，仍需确保后端允许来自前端域名的跨域请求。使用cors中间件：

• 安装依赖：

  npm install cors
  

• 在Express入口文件中配置：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 允许指定来源（开发环境可包含localhost和服务器IP）
  app.use(cors({
    origin: ['http://localhost:3000', 'http://<你的服务器IP>:3000'],
    credentials: true // 如果需要传递Cookie或认证头，开启此项
  }));
  
  // 或者开发环境临时允许所有来源（生产环境不建议）
  // app.use(cors());
  
  // 后续路由和逻辑
  app.get('/api/data', (req, res) => {
    // 返回数据逻辑
  });
  
  app.listen(3001, () => {
    console.log('Backend running on port 3001');
  });
  

3. 开发环境反向代理（简化配置） #

在React项目的package.json中添加proxy字段，让前端请求自动转发到后端，无需处理跨域：

{
  "name": "your-react-app",
  "proxy": "http://localhost:3001",
  // 其他配置...
}

此时前端只需用相对路径请求API：

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

这种方式下，局域网其他设备访问前端时，请求会自动转发到服务器的后端服务，同时避免跨域问题。

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