来自除 localhost 之外的每个来源的 CORS 策略阻止的对外部 API 的 HTTP 请求

Posted 2023-03-04

【中文标题】来自除 localhost 之外的每个来源的 CORS 策略阻止的对外部 API 的 HTTP 请求

【英文标题】：HTTP Request to external API blocked by CORS policy from every origin except localhost

【发布时间】：2020-03-20 04:48:54

【问题描述】：

我正在创建一个我想使用 DEGIRO 公共 API 的 Angular 应用程序。我的应用程序和外部 API 之间的跨域请求出了点问题。

当我在 localhost 上使用ng serve 运行应用程序时，我的预检请求完美通过了访问控制检查。但是，当我使用 any other origin 主机（如 [any IPv4-address]:4200 with ng serve --host [any IPv4-address]）运行应用程序时，我遇到了问题。部署到例如 Firebase 后也会出现同样的问题。

为了与 API 通信，我使用 HttpClientModule 和 Angular，如下图所示。

Angular HTTP POST API call

下面的错误消息向我描述了我遇到的问题。

"Access to XMLHttpRequest at 'https://trader.degiro.nl/login/secure/login' from origin
'http://192.168.178.120: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."

这个错误让我感到困惑的主要原因是它不会发生在本地主机。在下面的两个图像中，显示了预检请求标头（localhost:4200 和 192.168.178.52:4200）之间的差异。 请注意唯一的区别是源头和引用头。 Firebase上部署的应用也是类似这样。

Http request header (localhost)

Http request header (IPv4-address)

我尝试通过添加 'content-type': 'text/plain' 标头来跳过预检请求，但即使是现在简单的请求也不会被 CORS 政策接受。

我也阅读了几个有点相似的问题，但没有一个完全符合我的情况，他们的解决方案也没有。除了这些，我还阅读了一些关于 CORS 的内容。我发现这篇文章内容丰富且很有帮助。 https://www.html5rocks.com/en/tutorials/cors/

我想不出更多的上下文了。我希望这篇文章很清楚，你能提供帮助。无论如何，谢谢！

【参考方案1】：

您是否请求与 VWD 服务进行会话？ 正如我首先看到的，您需要向以下位置发出 POST 请求：

https://degiro.quotecast.vwdservices.com/CORS/request_session?version=1.0.20170315&userToken=YOUR_TOKEN

并提供标题：Origin: 'https://trader.degiro.nl' 并提供正文：JSON.stringify(referrer: 'https://trader.degiro.nl')

获得会话后，您可以使用它来例如：获取 VWD 问题 ID 的最新出价/要价

检查this package，看看他们是如何让它工作的。

干杯:)

【讨论】：

嗨，ahmetovicajdin，非常感谢您这么快回复。直到明天晚上 (GMT+1)，我才能尝试这个。有时间我会尽快更新这篇文章！

我一直在尝试这个，但我不断收到来自 degiro.quotecast.vwdservices.com/CORS/… 的 401 响应。接下来我被告知我不能设置不安全的来源标头。为什么我需要将该链接用于 VWD 服务？一切都在本地主机上运行。你怎么看？