Firefox中Access-Control-Allow-Origin匹配仍被CORS拦截如何解决？

问题核心原因 #

错误提示已经明确了不匹配的目标源是https://localhost:3000，而你返回的Access-Control-Allow-Origin值为http://localhost:3000，HTTP和HTTPS属于不同的源标识，即使域名、端口完全一致，协议不同也会判定为匹配失败。
你在Brave中访问正常，是因为部分Chromium内核浏览器对localhost场景的跨源校验有宽松适配，或者你在Brave中打开的是http://localhost:3000，而Firefox中打开的是https://localhost:3000。

排查与解决步骤 #

• 首先确认Firefox地址栏中你的React应用地址前缀：如果是https开头，检查你的React项目启动配置是否开启了HTTPS模式，比如create-react-app项目如果启动时加了HTTPS=true参数，或者.env配置文件里配置了HTTPS=true，就会用HTTPS协议启动本地服务
• 如果你需要保留本地HTTPS模式，有两种解决方式：
  1. 本地开发阶段用框架自带的代理功能规避跨域：比如create-react-app项目可以在package.json中添加配置项 "proxy": "https://jsonplaceholder.typicode.com"，后续请求直接写/users即可，由本地开发服务器代理转发请求，不会触发跨域校验
  2. 调整接口返回的Access-Control-Allow-Origin值，精确匹配https://localhost:3000
• 如果你不需要本地HTTPS模式，直接在Firefox中用http://localhost:3000访问应用即可
• 额外排查项：确认Firefox是否开启了HTTPS-only模式，该模式会自动将HTTP的localhost地址重定向到HTTPS，可在浏览器设置的隐私与安全板块中关闭该配置针对localhost的适配

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