React生产构建环境无法获取API数据，开发环境正常

1. 修复后端CORS配置的核心错误 #

你当前的corsOptions.origin写法逻辑错误——'http://localhost:3000' || 'http://192.168.0.212:3000/'在JavaScript中只会返回第一个真值，也就是永远仅允许localhost:3000的请求，生产环境的前端域名完全不在允许列表内，这是导致CORS拦截的直接原因。

方案一：指定多个允许的来源 #

直接将所有需要放行的域名放入数组：

const corsOptions = {
  origin: ['http://localhost:3000', 'http://192.168.0.212:3000', '你的生产环境前端域名'],
  credentials: true,
  optionSuccessStatus: 200
};

方案二：动态校验来源（适配多环境） #

如果需要更灵活的环境适配，用函数判断请求来源是否合法：

const allowedOrigins = ['http://localhost:3000', 'http://192.168.0.212:3000', '你的生产环境前端域名'];

const corsOptions = {
  origin: (origin: string | undefined, callback: (err: Error | null, allow?: boolean) => void) => {
    // 允许Postman这类无来源的请求
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  optionSuccessStatus: 200
};

2. 修正前端Axios的baseURL配置 #

生产环境下仍使用localhost:5000作为API地址完全无效，必须替换为后端API的生产地址，建议用环境变量自动切换：

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.NODE_ENV === 'production' 
    ? 'https://你的生产API域名.com' 
    : 'http://localhost:5000/'
});

export default instance;

确保前端项目配置好对应环境变量，生产构建时自动替换为正确的API地址。

3. 排查浏览器插件拦截问题 #

net::ERR_BLOCKED_BY_CLIENT也可能是浏览器插件（如AdBlock、隐私保护类插件）拦截请求导致，可尝试：

• 禁用所有浏览器插件后重新测试
• 用隐私模式打开生产页面验证

4. 确认后端API生产环境可用性 #

先直接用Postman调用生产API的接口，确认能正常返回响应；同时检查后端服务在生产环境是否正常运行，域名/端口是否可访问。

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