React项目package.json中proxy配置部署Vercel后失效求助

create-react-app 的 proxy 配置仅在本地开发环境（npm start）生效，它依赖 React 开发服务器完成请求转发。执行 npm run build 生成静态文件后，部署到 Vercel 时，静态资源没有对应开发服务器处理转发逻辑，因此 proxy 规则完全失效。

方案1：直接在API请求中使用完整后端URL #

修改前端代码里的API请求路径，将相对路径替换为后端完整地址：

• 原代码示例：fetch('/api/users')
• 修改后：fetch('https://has-backend-production.up.railway.app/api/users')

为便于维护，可通过环境变量统一管理：

1. 在项目根目录创建 .env 文件，添加：

   REACT_APP_API_BASE_URL=https://has-backend-production.up.railway.app
   

2. 代码中调用示例：

   fetch(`${process.env.REACT_APP_API_BASE_URL}/api/users`)
   

注意：React 环境变量必须以 REACT_APP_ 开头，才会被打包到生产环境。

方案2：在Vercel配置请求重写（推荐，保持本地开发体验） #

在前端项目根目录创建 vercel.json 文件，添加重写规则，让Vercel自动转发 /api 开头的请求到后端：

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://has-backend-production.up.railway.app/api/:path*"
    }
  ]
}

配置完成后，提交代码到GitHub并触发Vercel重新部署，前端代码依然可以使用相对路径 /api/xxx 发起请求，和本地开发体验一致。

方案3：确保后端CORS配置正确 #

即使本地测试正常，部署后可能因跨域策略报错，需在Spring Boot后端配置允许Vercel域名的跨域请求：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://has-frontend.vercel.app")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

临时测试可使用 .allowedOrigins("*")，但生产环境建议指定具体域名以保障安全。

1. 选择上述任一方案修改代码或配置
2. 本地执行 npm run build 后，用静态服务器（如 serve -s build）测试生产环境是否正常
3. 提交修改到GitHub，触发Vercel重新部署，验证线上站点的API请求是否正常

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