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

Question

我必须从在线外部服务器上托管的 json 获取数据。该网址类似于 http://example.com/path/to/resource.json。我可以通过浏览器、 postman 和其他一些工具读取这个 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.

该代码实际上只是使用 HttpClient 类进行 GET:

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)Web 应用程序调用 API 会导致跨源请求，因为该 Web 应用程序是在与外部API。这将导致浏览器首先触发预检请求，询问外部 API 服务器是否允许来自您的网络应用的跨域请求。如果不是这种情况，则请求将被浏览器阻止。

当您直接在浏览器或类似工具中访问 API 时，将直接访问 URL，并且浏览器/工具不会像 CORS 请求那样发出预检请求。

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

1. 分别在 API 服务器上配置 CORS - 由于您无法控制 API 服务器，因此已被淘汰
2. 使用代理服务器，例如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为了更好的理解!