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

问题描述

我必须从托管在外部服务器上的 json 在线获取数据。网址看起来像 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.

代码实际上只是带有 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 时遇到问题。

解决方法

从 MDN Web Docs on CORS 中引用：

谁应该阅读这篇文章？

每个人，真的。

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

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

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

但简而言之：在浏览器中从您的（Angular）Web 应用程序调用 API 会导致跨域请求，因为 Web 应用程序是在与外部 API。这将导致浏览器首先触发一个预检请求，询问外部 API 服务器是否允许来自您的 Web 应用的跨域请求。如果不是这种情况，请求将被浏览器阻止。

当您直接在浏览器或类似工具中访问 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 以获得更好的理解！