create-react-app+Express跨端口部署至远程服务器后请求触发意外刷新

兄弟，我太懂这个坑了！你本地开发时用的proxy配置是create-react-app开发服务器专属的功能，一旦你执行npm run build把前端打包成生产环境的静态文件后，这个配置就完全失效了——远程服务器上运行的是静态文件，没有开发服务器帮你做请求转发，自然就出问题了，甚至引发页面刷新。下面给你几个靠谱的解决方案：

方案1：给Express后端配置CORS（最直接的跨域解决办法） #

这是前后端分离部署时最常用的方式，直接让后端允许前端的跨域请求：

1. 先在后端项目里安装cors包：

npm install cors

2. 在你的Express入口文件（比如app.js）里启用CORS：

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

// 生产环境建议指定具体的前端域名/IP，避免安全风险
app.use(cors({
  origin: 'http://35.125.xxx.xxx:3000', // 替换成你远程前端的实际地址
  credentials: true // 如果你的请求需要携带Cookie或HTTP认证信息，就加上这行
}));

// 如果你只是测试阶段，也可以临时允许所有来源（生产环境别这么干）
// app.use(cors());

// 后面的路由逻辑不变
app.get('/api/your-endpoint', (req, res) => {
  res.send('后端响应内容');
});

3. 最后修改前端的axios请求地址，直接用后端的完整远程地址：

axios.get('http://35.125.xxx.xxx:3003/api/your-endpoint')
  .then(res => { /* 处理响应 */ })
  .catch(err => { /* 处理错误 */ });

方案2：用Nginx做反向代理（线上部署的最佳实践） #

如果你的线上环境用Nginx，推荐用这种方式——把前后端请求统一到同一个域名/端口下，彻底避免跨域问题，还能优化请求性能：

1. 先把React打包后的build文件夹放到服务器的某个目录，比如/var/www/react-app/build
2. 修改Nginx的配置文件（通常在/etc/nginx/nginx.conf或者/etc/nginx/sites-available/下），添加一个server块：

server {
  listen 80; # 可以改成你想用的端口，比如80是默认HTTP端口
  server_name 35.125.xxx.xxx; # 你的服务器IP或域名

  # 处理前端静态文件请求
  location / {
    root /var/www/react-app/build;
    try_files $uri $uri/ /index.html; # 解决React路由刷新404的问题
  }

  # 处理后端API请求，自动转发到3003端口
  location /api {
    proxy_pass http://localhost:3003;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

3. 重启Nginx生效：

sudo nginx -s reload

4. 这时候前端的axios请求可以直接写相对路径，不用改任何代码：

axios.get('/api/your-endpoint')
  .then(res => { /* 处理响应 */ })
  .catch(err => { /* 处理错误 */ });

为什么本地没问题？ #

本地开发时，npm start启动的是create-react-app的开发服务器，它会自动读取package.json里的proxy配置，把前端的API请求转发到后端端口。但生产构建后是纯静态HTML/CSS/JS文件，没有这个开发服务器帮你做转发，所以proxy配置完全不起作用。

另外，你提到的页面意外刷新，大概率是因为跨域请求被浏览器拦截，或者请求返回了异常的状态码（比如3xx重定向），导致页面跳转。用上面的方案解决跨域问题后，这个刷新的问题应该也会跟着消失。

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