Angular returns 预检 CORS 错误，使用其他工具没有错误

Question

我必须从托管在外部服务器上的 json 在线获取数据。 url 看起来像 http://example.com/path/to/resource.json。我可以通过浏览器、邮递员和其他一些工具阅读这篇文章json。

但是当我尝试从 Angular 11 应用程序获取数据时，我收到 CORS 错误：

Access to XMLHttpRequest at 'http://example.com/path/to/resource.json'
from origin 'http://localhost:4200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

代码实际上只是 GET 与 HttpClient class:

this.http.get('http://example.com/path/to/resource.json)'

我尝试配置代理但没有成功：

// proxy.conf.json
{
    "/path": {
        "target": "http://example.com",
        "secure": false
    }
}

// angular.json
"serve": {
  [...]
  "options": {
    [...]
    "proxyConfig": "proxy.conf.json"
  },
  [...]
},

这两个文件都在项目的根文件夹中。

我无法控制服务器，因此我不能在其上允许 CORS 或更改其他设置，但我认为这不是问题所在。

我不明白为什么我可以通过许多工具访问资源，但我在使用 Angular 时总是遇到问题。

Answer 1

引用自MDN Web Docs on CORS：

Who should read this article?

Everyone, really.

我同意并强烈建议阅读 that page。它将极大地帮助您了解正在发生的事情、原因以及如何正确处理此问题。

I don't understand why I can access resources via many tools but I always have problems to do the same with Angular.

首先：这不是 Angular 的问题，而只是浏览器的一个安全功能。

但简而言之：在浏览器中从您的 (Angular) 网络应用程序调用 API 会导致 跨源请求 因为网络在与外部 API 不同的源（=域）上访问应用程序。这将导致浏览器首先触发 preflight 请求以询问外部 API 服务器是否允许来自您的网络应用程序的跨源请求。如果不是这种情况，请求将被浏览器阻止。

当您直接在浏览器或类似工具中访问 API 时 URL 被 直接访问 而 browser/tool 不会发出与 CORS 请求一样的预检请求。

基本上有两种方法可以解决这个问题：

分别在 API 服务器上配置 CORS - 由于您无法控制 API 服务器
使用代理服务器，例如Angular proxy

在第一种情况下，您无需更改前端代码中的任何内容，在后一种情况下，您需要更改前端中的 URL 来访问代理服务器，即

this.http.get('http://example.com/path/to/resource.json')

变成

this.http.get('/path/to/resource.json')

（假定您的代理在与您的 Angular 应用程序相同的来源下运行）

不过，我再次建议阅读 MDN Web Docs on CORS 以便更好地理解！

Angular returns 预检 CORS 错误，使用其他工具没有错误

Angular returns preflight CORS error, no errors with other tools

cors

preflight

angular

angular-httpclient

Who should read this article?