部署在AWS Amplify上的React应用出现CORS错误求助

问题描述 #

React应用部署到AWS Amplify后，点击「登录/注册」链接触发GET请求时，Chrome控制台出现两类CORS错误：

• 请求因缺少Access-Control-Allow-Origin响应头被拦截
• GET请求直接失败

网络请求详情：

• 引用策略：strict-origin-when-cross-origin
• Accept头：application/json, text/plain, */*
• 响应标签无内容

触发请求的Tanstack Query代码：

const { data: empList } = useQuery("employerList", () => {
  return axios.get(process.env.REACT_APP_SERVER_URL + "/employer/list");
});

本地测试时前后端无CORS问题，已尝试以下配置但未解决：

• 在前后端根目录放置customHttp.yml并重新部署
• Spring Boot后端控制器类、应用类添加@CrossOrigin(origins = "*", allowedHeaders = "*")注解
• 在application.properties配置CORS参数
• 添加自定义CorsConfig配置类

预期效果：GET请求成功，加载雇主下拉列表，完成用户注册与登录流程。

解决方案 #

1. 验证Spring Boot后端CORS配置是否真正生效 #

• 用Postman直接请求后端接口，检查响应头是否包含Access-Control-Allow-Origin（值应为Amplify应用域名或*）
• 若后端使用Spring Security，需确保CORS过滤器在Security过滤器链之前执行：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      http.cors().and()
          // 其他安全配置
  }
  

• 修正自定义CorsConfig配置（指定Amplify域名而非通配符，避免浏览器限制）：

  @Configuration
  public class CorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          CorsConfiguration config = new CorsConfiguration();
          config.setAllowCredentials(true);
          // 替换为你的Amplify应用域名，如https://xxx.amplifyapp.com
          config.addAllowedOriginPattern("https://*.amplifyapp.com");
          config.addAllowedHeader("*");
          config.addAllowedMethod("*");
          source.registerCorsConfiguration("/**", config);
          return new CorsFilter(source);
      }
  }
  

2. 配置AWS Amplify重写与转发规则 #

如果前端直接请求后端接口失败，可通过Amplify代理转发请求，避免跨域问题。在amplify.yml中添加重写规则：

rewriteRules:
  - source: '/api/<*>'
    target: 'https://your-backend-domain.com/<*>'
    status: 200
    condition:
      and:
        - key: 'request.headers.origin'
          value: 'https://your-amplify-domain.amplifyapp.com'
          operator: 'eq'

修改前端请求路径为/api/employer/list，由Amplify代理转发到后端。

3. 检查环境变量与协议一致性 #

• 确认Amplify控制台中配置的REACT_APP_SERVER_URL是完整的HTTPS地址（Amplify为HTTPS环境，浏览器禁止HTTPS页面请求HTTP接口）
• 验证环境变量在部署时已正确注入，无拼写错误

4. 清除浏览器缓存 #

强制刷新页面（Ctrl+Shift+R），清除浏览器缓存后重新测试，避免旧的CORS响应缓存导致的问题

5. 确认后端可访问性 #

• 检查后端服务是否处于运行状态，公网可访问
• 验证后端服务器的安全组、防火墙是否允许Amplify应用的IP段访问

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