Angular 返回预检 CORS 错误，其他工具没有错误 [英] Angular returns preflight CORS error, no errors with other tools
问题描述
我必须从托管在外部服务器上的 json 在线获取数据.url 看起来像 http://example.com/path/to/resource.json.我可以通过浏览器、邮递员和其他一些工具读取这个 json.
I have to get data from a json hosted on an external server online. The url look like http://example.com/path/to/resource.json. I can read this json via browser, postman and some other tool.
但是当我尝试从 Angular 11 应用程序获取数据时，我收到了 CORS 错误:
But when I try to get the data from an Angular 11 application I get the CORS error:
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:
The code is literally just the GET with the HttpClient class:
this.http.get('http://example.com/path/to/resource.json)'
我尝试的是配置代理但没有成功:
What I tried was to configure the proxy but without success:
// proxy.conf.json
{
"/path": {
"target": "http://example.com",
"secure": false
}
}
// angular.json
"serve": {
[...]
"options": {
[...]
"proxyConfig": "proxy.conf.json"
},
[...]
},
两个文件都在项目的根文件夹中.
Both files are in the root folder of the project.
我无法控制服务器，因此我不能在其上允许 CORS 或更改其他设置，但我认为这不是问题.
I don't have control on the server, so I cannot allow CORS on it or change other settings but I don't think this is the issue.
我不明白为什么我可以通过许多工具访问资源，但我总是在使用 Angular 时遇到问题.
I don't understand why I can access resources via many tools but I always have problems to do the same with Angular.
推荐答案
引用自 CORS 上的 MDN 网络文档:
每个人，真的.
我同意并强烈建议阅读该页面.它将极大地帮助您了解正在发生的事情、原因以及如何正确处理.
I agree and strongly suggest to read that page. It will help you greatly to understand what is going on and why and how to approach this correctly.
我不明白为什么我可以通过许多工具访问资源，但我总是在使用 Angular 时遇到问题.
I don't understand why I can access resources via many tools but I always have problems to do the same with Angular.
首先:这不是 Angular 的问题，而只是浏览器的安全功能.
First: this is not an issue with Angular but simply a security feature of the browser.
但简而言之:在浏览器中从您的(Angular)Web 应用程序调用 API 会导致跨域请求，因为 Web 应用程序是在与外部 API.这将导致浏览器首先触发一个预检请求，以询问外部 API 服务器是否允许来自您的 Web 应用的跨域请求.如果不是这种情况，请求将被浏览器阻止.
But in short: calling the API from your (Angular) web app in the browser results in a cross-origin request since the web app is accessed on a different origin (=domain) than the external API. This will cause the browser to first trigger a preflight request to ask the external API server whether it allows a cross-origin request from your web app. If that's not the case the request is blocked by the browser.
当您直接在浏览器或类似工具中访问 API 时，会直接访问 URL，并且浏览器/工具不会像 CORS 请求一样发出预检请求.
When you access the API directly in the browser or similar tools the URL is accessed directly and the browser/tool does not issue a preflight request as with a CORS request.
基本上有两种方法可以解决这个问题:
There are basically two ways to solve this:
- 分别在 API 服务器上配置 CORS - 由于您无法控制 API 服务器，因此已被淘汰
- 使用代理服务器，例如Angular 代理
在第一种情况下，您不必更改前端代码中的任何内容，在后一种情况下，您需要更改前端中的 URL 以访问代理服务器，即
In the first case you wouldn't have to change anything in your frontend code, in the latter case you need to change the URL in the frontend to access the proxy server instead, i.e.
this.http.get('http://example.com/path/to/resource.json')
变成
this.http.get('/path/to/resource.json')
(假设您的代理与您的 Angular 应用程序在同一来源下运行)
(given your proxy runs under the same origin as your Angular app)
但同样，我建议阅读 MDN Web Docs上 CORS 以便更好地理解！
But again, I'd suggest to read the MDN Web Docs on CORS for a better understanding!
这篇关于Angular 返回预检 CORS 错误，其他工具没有错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
