React项目package.json配置axios代理开发正常，build后serve部署请求返回index.html

问题原因 #

• package.json 中配置的 proxy 字段仅在 React 开发模式（yarn start 启动的 Webpack DevServer 环境）下生效，项目 build 后生成的是纯静态资源包，serve 作为静态文件服务器不会读取和生效 package.json 里的代理配置。
• 返回状态码200且内容为 index.html 是单页应用的常规 fallback 逻辑：静态服务器匹配不到 /cs122b_backend/api/movieList 对应的静态资源时，会默认返回 index.html 用来支持前端路由，所以不会触发404状态码。

解决方案 #

本地测试 build 产物场景 #

1. 优先修改 axios 请求写法，删除写死的域名端口，改为相对路径：

await axios.get('/cs122b_backend/api/movieList').then(
// 原有逻辑不变
)

2. 方法1：给 serve 配置代理规则，将指定前缀的请求转发到后端地址，启动命令改为：
   serve -s build --proxy http://localhost:8080
3. 方法2：如果后端已经配置了跨域权限，直接把 axios 请求的 baseURL 改为后端地址，不走前端代理即可：
   await axios.get('http://localhost:8080/cs122b_backend/api/movieList')

生产部署场景 #

在你使用的 Web 服务器（Nginx、Caddy 等）中配置反向代理规则，将所有 /cs122b_backend 前缀的请求转发到后端服务地址，其余请求返回 index.html 即可。比如 Nginx 参考配置：

location /cs122b_backend {
    proxy_pass http://你的后端服务地址;
}
location / {
    try_files $uri $uri/ /index.html;
}

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