Angular应用无法获取Cloudflare防护的已开启CORS站点数据如何解决？

核心错误修正 #

不要在前端请求头添加Access-Control-Allow-Origin，该字段属于服务端返回的响应头，前端配置完全无效，反而可能触发额外的CORS预检请求，加大排查难度。

差异原因说明 #

浏览器地址栏直接输入地址发起的是页面导航类GET请求，不属于XMLHttpRequest/Fetch范畴，浏览器不会对这类请求执行CORS跨域校验。而Angular HttpClient底层基于XHR实现，跨域请求会自动被浏览器施加CORS规则校验，只要服务端没有返回符合要求的CORS响应头，就会被拦截。

你想伪造普通浏览器请求绕开CORS的思路是走不通的：浏览器发起XHR请求时会自动带上Origin请求头，该头由浏览器控制，前端代码无法修改，CORS是浏览器层面的安全策略，前端没有办法直接绕过，只能通过代理或者服务端配置解决。

代理报错解决方案 #

你用Angular内置代理时报Cloudflare 1003错误，是因为代理配置未正确传递Host头，Cloudflare校验请求的Host头不匹配站点配置，因此拦截了直接IP访问请求。修改代理配置文件proxy.conf.json如下：

{
  "/api": {
    "target": "你的接口服务完整域名地址",
    "changeOrigin": true,
    "secure": false,
    "headers": {
      "Host": "接口服务对应的域名（不要填IP）"
    },
    "pathRewrite": {
      "^/api": ""
    }
  }
}

启动开发服务时添加代理参数：ng serve --proxy-config proxy.conf.json，业务代码中请求接口时改为请求本地代理路径，例如原请求${远端地址}/list/改为/api/list/即可。

生产环境适配方案 #

生产环境下建议从两种方案中二选一：

• 要求接口服务端配置正确的CORS响应头，允许你前端部署的域名跨域访问
• 用Nginx等反向代理服务，把前端静态资源和接口请求部署在同一个域名下，不同路径转发到对应的服务，从根源上避免跨域问题

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