来自角度的公共 API 调用中的 CORS 问题，但直接在浏览器中运行良好 [重复]

Posted 2023-03-03

【中文标题】来自角度的公共 API 调用中的 CORS 问题，但直接在浏览器中运行良好 [重复]

【英文标题】：CORS issue in public API call from angular but works fine directly from browsers [duplicate]

【发布时间】：2021-08-12 03:56:12

【问题描述】：

有一个公共 API 可以在浏览器直接点击时给出响应。我正在使用 Chrome 浏览器。以下是 API - https://query1.finance.yahoo.com/v7/finance/chart/abc?range=7d&interval=1m

当我从 Angular 访问相同的 API 时，它给了我以下错误 -

CORS 政策已阻止从源“http://localhost:4200”访问“https://query1.finance.yahoo.com/v7/finance/chart/?range=7d&interval=1m”处的 XMLHttpRequest : 请求的资源上不存在“Access-Control-Allow-Origin”标头。

下面是我的代码-

this._http.get(url).subscribe(
      (resp) => 
          console.log(resp);
      ,
      (error) => 
        console.log(error);
      
);

建议使用以下命令的解决方案 - chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security。它有效，但我想要一个适用于普通浏览器的解决方案。因为一旦我托管了这个，一般用户显然不会使用那个命令。

【问题讨论】：

如果直接点击，那按定义不是跨域请求。

【参考方案1】：

默认情况下，不受信任的站点不允许向其他站点发出请求。 CORS 允许目标网站的机制对此进行豁免（但由于明显的原因不是请求网站），但由于您可能不控制雅虎的网络服务器，因此您不能这样做。因此，您无法从 Angular 客户端应用程序直接访问 Yahoo API。

但是，您可以做的是从服务器访问它，然后将数据转发到您的 Angular 客户端应用程序。出于开发和无关紧要的生产目的，您还可以为此使用第三方 CORS 代理。 thingproxy提供了这样一个免费的代理服务器，它会转发任何附加到https://thingproxy.freeboard.io/fetch/的API URL的响应。

例如，您可以使用与此类似的代码：

function getCorsProxiedUrl(url: string): string

    return `https://thingproxy.freeboard.io/fetch/$url`;

this._http.get(getCorsProxiedUrl(url)).subscribe(
    (resp) => 
        console.log(resp);
    ,
    (error) => 
        console.log(error);
    
);

【讨论】：

谢谢，这行得通。但是保持对代理服务器的依赖真的是个好主意吗？它将来可能不存在或更改，在这种情况下，我们将不得不移动到另一个代理服务器。此解决方案适用于我的情况，但如果我们想在重要的产品环境中实施它，是否有任何解决方法？

thingproxy 代理服务器是开源的，因此您可以在本地托管它，也可以开发自己的代理服务器。除此之外，在不控制雅虎服务器的情况下，别无他法。