React客户端如何代理到SpringBoot服务端？部署Heroku报Invalid Header怎么解决

你之前尝试的proxy配置、setupProxy.js都仅适用于本地开发阶段，由Create React App内置的开发服务器提供代理能力。当你执行npm run build部署到Heroku时，React项目会被编译为纯静态资源，不再有开发服务器提供代理能力，所以上述配置完全不生效。

方案1：前后端分独立Heroku应用部署（适配你当前的架构） #

• 第一步：统一接口请求前缀，新增环境变量区分环境
  所有前端接口请求统一拼接环境变量，比如原有fetch('/api/auth')修改为：

  fetch(`${process.env.REACT_APP_API_URL}/api/auth`)
  

  注意：Create React App 要求自定义环境变量必须以REACT_APP_为前缀才会被识别。

• 第二步：新增对应环境的变量配置文件
  在React项目根目录新建.env.development（本地开发生效），内容：

  REACT_APP_API_URL=
  

  空值代表本地开发时直接走相对路径，匹配你原有package.json的proxy配置，不影响本地调试。
  再新建.env.production（生产部署生效），内容替换为你后端的Heroku地址，注意要用https协议：

  REACT_APP_API_URL=https://my-server.herokuapp.com
  

• 第三步：SpringBoot后端配置跨域
  在后端接口对应Controller类上添加@CrossOrigin注解，放行前端域名：

  @CrossOrigin(origins = "https://你的前端Heroku应用域名")
  @RestController
  @RequestMapping("/api")
  public class AuthController {
    // 接口逻辑
  }
  

部署前删除package.json中的proxy字段即可，避免生产环境不必要的配置冲突。

方案2：前后端合并部署到同一个Heroku应用 #

如果不想维护两个应用，可以把React编译后的静态资源集成到SpringBoot项目中统一部署，完全不需要代理配置：

• 第一步：React项目执行npm run build，将生成的build目录下所有文件，复制到SpringBoot项目的src/main/resources/static目录中
• 第二步：SpringBoot新增路由适配配置，避免前端路由刷新404：

  @Configuration
  public class WebMvcConfig implements WebMvcConfigurer {
      @Override
      public void addViewControllers(ViewControllerRegistry registry) {
          registry.addViewController("/{path:[^\\.]*}")
                  .setViewName("forward:/index.html");
      }
  }
  

• 第三步：前端接口直接写相对路径/api/xxx即可，不需要额外加域名，前后端同域名不存在跨域和代理问题，直接打包SpringBoot的jar包部署即可。

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