为何浏览器直接访问正常，Angular 5调用GitHub Jobs API却报跨域错误？

我来帮你拆解这个问题～核心在于浏览器同源策略的两种不同场景：

为啥浏览器地址栏直接访问没问题？ #

当你在浏览器地址栏输入https://jobs.github.com/positions.json时，这属于浏览器的原生导航请求，不属于AJAX/Fetch这类“跨域异步请求”的范畴。浏览器对这种场景不会触发CORS预检机制，也不会校验Access-Control-Allow-Origin响应头，所以能直接拿到数据。

为啥Angular请求就触发CORS错误？ #

你的Angular应用运行在localhost:4000，而GitHub Jobs API的域名是jobs.github.com，两者协议、域名、端口三者不完全一致，属于跨域场景。当Angular通过HttpClient发起AJAX请求时，浏览器会严格执行同源策略：

1. 自动发送一个OPTIONS预检请求给API服务器
2. 要求服务器返回包含Access-Control-Allow-Origin的响应头，明确允许localhost:4000的请求
3. 如果服务器没配置这个头（GitHub Jobs API的CORS规则是固定的，不会允许自定义的localhost:4000），浏览器就会抛出你看到的Access-Control-Allow-Origin错误

另外你提到的“注册应用使用的URL”，那是针对GitHub OAuth授权这类场景的，和CORS跨域完全是两回事，解决不了当前问题。

给你几个可行的解决方案 #

方案1：Angular代理转发（开发环境首选） #

在项目根目录新建proxy.conf.json文件，内容如下：

{
  "/github-jobs": {
    "target": "https://jobs.github.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {
      "^/github-jobs": ""
    }
  }
}

然后修改angular.json里的serve配置，添加代理文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "你的项目名:build",
    "proxyConfig": "proxy.conf.json"
  }
}

最后把Angular里的请求URL改成/github-jobs/positions.json，这样开发服务器会帮你转发请求，相当于同源请求，CORS错误就消失了。

方案2：临时用第三方CORS代理（仅开发测试） #

把请求URL改成https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json，这类服务会帮你补上CORS响应头。但注意这只是临时方案，生产环境别用，依赖第三方服务有风险。

方案3：后端转发请求（生产环境推荐） #

如果是上线的项目，建议在你的后端服务（比如Node.js、SpringBoot等）里写一个接口，由后端去调用GitHub Jobs API，再把数据返回给Angular。后端请求不受浏览器同源策略限制，还能顺便做数据缓存、过滤等处理，更安全可靠。

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