生产环境下React向Express发送GET请求异常问题求助

核心原因推测 #

生产环境中前端静态资源服务器（如Nginx、Vercel、Netlify等）会优先匹配静态HTML文件，导致API的GET请求被拦截返回前端页面；而PUT这类非GET请求通常会直接转发到后端，因此能正常获取响应。这是单页应用部署时的常见路由冲突问题。

具体排查与解决步骤 #

1. 调整前端部署的路由转发规则 #

单页应用的静态服务器通常会配置所有未匹配静态资源的请求回退到index.html，这会把API的GET请求也当成前端路由返回页面。需要让服务器区分API请求和前端路由：

• Nginx部署：修改配置文件，给API路径单独设置转发规则

# 优先转发API请求到后端
location /users/ {
    proxy_pass http://你的后端服务地址; # 示例：http://localhost:3001
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

# 其他请求回退到前端index.html
location / {
    try_files $uri $uri/ /index.html;
}

• Netlify部署：在项目根目录创建_redirects文件

# 转发API请求到后端，其余请求返回前端页面
/users/*  http://你的后端API地址/:splat  200
/*  /index.html  200

• Vercel部署：在项目根目录创建vercel.json文件

{
  "rewrites": [
    { "source": "/users/(.*)", "destination": "http://你的后端API地址/users/$1" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

2. 确认API请求URL的正确性 #

生产环境下要检查${URL}/users/getUsers中的URL是否指向后端API的完整地址，开发环境可能依赖React的proxy字段自动转发请求，但生产环境没有这个代理机制，若URL误写为前端域名，请求会直接打到静态服务器返回HTML。

3. 检查后端CORS中间件的加载顺序 #

确保CORS中间件在路由之前加载，避免OPTIONS预检请求被拦截：

const express = require('express');
const cors = require('cors');
const app = express();

// 先加载CORS中间件，再注册路由
app.use(cors({origin: '*'}));
app.use(express.json());
app.use('/users', require('./routes/users'));

4. 验证请求是否到达后端 #

在后端GET路由中添加日志，确认请求是否真的被后端接收：

router.get("/getUsers", async (req, res) => {
  console.log("收到GET请求：", req.originalUrl); // 新增日志
  try {
    const allUsers = await User.find({});
    res.status(200).json({
        title: 'success',
        allUsers
    })
  }catch (err) {
    // 原有错误处理代码
  }
})

如果生产环境后端未输出该日志，说明请求被前端服务器拦截，回到步骤1调整转发规则。

额外优化建议 #

统一使用Axios发起请求（而非jQuery的$.get），更符合React生态，也便于统一处理请求拦截和错误捕获：

import axios from 'axios';

export const getUsers = createAsyncThunk('users/getUsers', 
async (_, {rejectWithValue}) => {  
  try {
    const res = await axios.get(`${URL}/users/getUsers`);
    const { allUsers } = res.data;
    return allUsers
  }catch (err) {
    return rejectWithValue(err.response?.data?.message || '请求失败')
  }
});

内容的提问来源于stack exchange，提问作者שמעון פוקס