部署在AWS Amplify的React应用遇CORS跨域问题，前端如何解决？

1. 启用no-cors模式（仅适用于无需读取响应的场景） #

如果你的请求只需要完成数据提交，不需要获取API返回的内容、状态码等信息，可以在fetch请求中添加mode: 'no-cors'配置，让浏览器跳过CORS校验。但这种模式下，你无法读取响应的任何内容，返回的是浏览器无法解析的不透明响应。示例代码：

fetch('API_END_POINT', {
  method: 'POST', // 或GET
  mode: 'no-cors',
  headers: {
    // 注意：no-cors模式仅允许设置安全头，Content-Type只能是application/x-www-form-urlencoded、multipart/form-data或text/plain
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: // 你的请求体数据
});

2. 利用AWS Amplify的重写代理（推荐方案） #

既然你的应用部署在AWS Amplify上，可以通过Amplify的重写与重定向功能搭建代理，让请求通过Amplify服务器转发，绕过浏览器的CORS限制：

• 登录AWS Amplify控制台，找到你的目标应用
• 进入「重写与重定向」页面
• 添加一条重写规则：
  • 源地址：/api-proxy/<*>
  • 目标地址：你的API实际地址/<*>（替换成真实的API_END_POINT，保留<*>以匹配后续路径）
  • 规则类型选择「200 (Rewrite)」
• 修改React代码中的请求地址，将原本的API_END_POINT替换为/api-proxy/开头的路径，比如原请求https://xxx.com/api/get-data改为/api-proxy/api/get-data

这种方式通过服务器端转发请求，不受浏览器CORS规则限制，且能正常读取API的响应内容，是最适合你当前部署环境的方案。

3. 本地与Amplify部署差异的原因 #

本地运行时无CORS问题，通常是因为React开发服务器（如webpack-dev-server）或你配置的package.json中的proxy字段帮你转发了请求，相当于本地搭建了临时代理，绕过了浏览器的CORS校验。而部署到Amplify后，没有了本地开发服务器的代理机制，直接从浏览器发起跨域请求就触发了CORS拦截。

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