部署在Heroku和Netlify的站点如何无需Chrome CORS扩展即可正常访问？

你遇到的问题本质是后端CORS配置存在遗漏，按以下步骤逐一排查修复即可：

• 先检查Heroku后端的CORS响应头配置，确保至少覆盖以下规则：
  • 允许的源（Access-Control-Allow-Origin）明确填写你的Netlify站点域名https://n-blogcode.netlify.app，不要使用*通配符，尤其当你的请求携带身份凭证（Cookie、Authorization头）时，通配符会直接导致CORS校验失效
  • 允许的请求方法（Access-Control-Allow-Methods）覆盖站点实际用到的所有方法，建议把常用的GET, POST, PUT, DELETE, OPTIONS全部加入配置
  • 允许的请求头（Access-Control-Allow-Headers）匹配前端发送的自定义头，Content-Type, Authorization这类常用头必须包含在内
  • 如果请求携带身份凭证，需要显式配置Access-Control-Allow-Credentials: true
• 确保Heroku后端正确响应预检OPTIONS请求：大部分服务端框架默认不会处理OPTIONS请求，会直接返回404/405错误导致浏览器预检不通过，你需要给后端所有接口路由添加OPTIONS请求的处理逻辑，返回200状态码和正确的CORS头
• 如果不想调整后端配置，也可以直接用Netlify的代理功能从根源规避跨域问题：在Netlify项目根目录新建_redirects文件，添加如下规则：

  /api/*  https://你的Heroku后端地址/:splat  200
  

  配置完成后前端所有接口请求改为发往/api/xxx路径，Netlify会自动代理转发到你的Heroku后端，全程不存在跨域问题，不需要额外配置后端CORS
• 所有配置完成后清除浏览器缓存再测试，避免旧的缓存CORS规则影响验证结果

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