路由器外部访问Spring+React项目时Chrome出现CORS错误如何解决

问题本质 #

这个报错不是普通的CORS配置错误，是Chrome浏览器的私有网络访问（Private Network Access, PNA）安全策略拦截：公网非HTTPS环境下的前端页面，默认不允许发起指向本地私有地址（localhost/192.168.x.x等内网段）的请求。

可行解决方案 #

• 调整前端API请求地址
  你当前React代码里写死了API地址为http://localhost:8080/api/v1/users，公网访问时前端运行在http://TESTURL.ddns.net:3000，请求API需要对应改为公网地址：http://TESTURL.ddns.net:8080/api/v1/users，同时在路由器配置8080端口的转发规则，指向你开发电脑的8080端口。
• 修正Spring跨域配置
  原@CrossOrigin注解仅允许了http://localhost:3000的跨域请求，需要新增公网前端源的白名单：

  @CrossOrigin(origins = {"http://localhost:3000", "http://TESTURL.ddns.net:3000"})
  

  开发阶段也可以临时设置为origins = "*"放通所有源，生产环境不要使用该配置。
• 临时调试方案（仅本地测试用）
  地址栏打开chrome://flags/#block-insecure-private-network-requests，将该选项设置为Disabled后重启浏览器，即可临时关闭私有网络访问限制，不需要改业务代码。
• 生产环境推荐方案
  给域名配置HTTPS证书，HTTPS站点的私有网络请求限制会大幅放宽；或者用反向代理将前后端部署在同一个域名下，用路径区分前后端请求，从根源上避免跨域问题。

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