Netlify部署React应用调用Heroku后端API出现CORS错误如何解决

proxy配置生效范围说明 #

• create-react-app 提供的 proxy 配置仅在本地开发环境生效，生产构建后不会产生任何作用。
• 本地开发时，React 启动的 webpack-dev-server 会自动转发同域 API 请求到你配置的 proxy 地址，浏览器始终请求同域的开发服务器，而服务器之间的请求不受同源策略限制，所以本地不会出现 CORS 问题。
• Netlify 上部署的是 React 构建后的静态资源，没有开发阶段的转发服务器，相对路径的 API 请求自然会被发送到当前 Netlify 域名下，无法到达 Heroku 后端。

线上问题修复方案 #

你可以选择以下任意一种方案解决问题：

方案1：后端配置CORS + 前端区分环境请求地址 #

1. 前端配置不同环境的基础请求地址，示例代码如下：

// 请求基础地址配置
const BASE_API_URL = process.env.NODE_ENV === 'production' 
  ? 'https://glacial-sierra-91195.herokuapp.com' 
  : ''

后续所有API请求都拼接该基础地址即可。

2. Spring 后端配置CORS规则，可选两种配置方式：

• 局部配置：在对应Controller类或者接口方法上添加@CrossOrigin注解

// 允许指定前端域名访问该接口
@CrossOrigin(origins = "https://elastic-mccarthy-484725.netlify.app")
@PostMapping("/login")
public Resp login(@RequestBody LoginReq req) {
    // 接口逻辑
}

• 全局配置：新增CORS配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 允许的前端域名，生产环境不建议配置为*
                .allowedOrigins("https://elastic-mccarthy-484725.netlify.app")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

如果项目引入了Spring Security，需要额外放开OPTIONS预请求的权限校验：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors().and()
            .csrf().disable()
            .authorizeRequests()
            // 允许所有OPTIONS类型的预请求不校验
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
            // 其余原有安全配置
            .anyRequest().authenticated();
    }
}

方案2：通过Netlify反向代理绕过跨域（无需修改后端） #

在React项目的public目录下新增_redirects文件，写入以下内容：

/api/*  https://glacial-sierra-91195.herokuapp.com/api/:splat  200

该配置会让Netlify自动把所有/api开头的请求转发到Heroku后端，浏览器始终请求同域地址，不会触发跨域校验。此时前端不需要区分环境，所有API请求都直接使用/api/xxx的相对路径即可。

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