在 Angular 中调用远程 URL 时出现 CORS 策略错误

Posted 2023-03-04

【中文标题】在 Angular 中调用远程 URL 时出现 CORS 策略错误

【英文标题】：CORS policy error while calling remote URL in Angular

【发布时间】：2020-03-12 13:52:46

【问题描述】：

尝试调用远程 API Url，但出现 Access-Control-Allow-Origin 错误。我尝试了很多类似以下的方法，但没有任何效果。

proxy.conf.js

const PROXY_CONFIG = [
  
    context: [
      "/api/planets"
    ],
    target: "https://swapi.co",
    secure: false,
    changeOrigin: true,
    logLevel: "debug",
    bypass: function (req, res, proxyOptions) 
      req.headers["Access-Control-Allow-Origin"] = "*";
      req.headers["X-Forwarded-Host"] = "localhost:8090";
      req.headers["X-Forwarded-For"] = "localhost";
      req.headers["X-Forwarded-Port"] = "8090";
      req.headers["X-Forwarded-Proto"] = "http";
    
  
];

module.exports = PROXY_CONFIG;

与ng serve --port 8090 --proxy-config proxy.conf.js一起运行

无法在服务器端进行任何更改，因为我使用的是第三方 API。

【问题讨论】：

有一个 chrome 插件可以帮助你解决 cors 错误。你会在谷歌上找到它。让我知道这是否有效

我也有类似的问题，但很多只需要在服务器本身配置以允许 CORS，在您的情况下，您需要请第三方帮助为您检查。

Access-Control-Allow-Origin 是一个响应头 developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…。将其包含在请求中是无效的。

"无法在服务器端进行任何更改，因为我使用的是第三方 API。"看起来服务器响应没有正确配置，无论是有意还是无意。如果您无法修改标头或让作者进行更改，解决方法是设置自己的代理服务器来传递请求，然后以请求+正确的 CORS 标头进行响应。

@ketan：太棒了。添加它作为答案，因为这个问题在***上非常常见。希望它也能帮助其他人。干杯！

【参考方案1】：

尝试在您的 chrome 浏览器中添加像 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en 这样的插件。

由于您无法更改服务器端配置，因此此插件可以解决问题。浏览器默认阻止 CORS

【参考方案2】：

因为您无法在远程服务器上进行任何更改。因此可以使用反向代理服务器对其进行转义。我在调用linkedin服务时也遇到了同样的问题。

一个。有一个 https://cors-anywhere.herokuapp.com/ 你可以在你的 url 之前附加这个 它将暂时解决 CORS 问题。

由于在企业场景中，您不能在应用程序特定名称之前使用 herokuapp.com，因此最好在代理服务器下方设置。

b.第二种方法是使用反向代理方法并设置您自己的服务器（本地或远程）进行反向代理。

 https://***.com/q/29670703/7562674

您还可以使用 Spring 和 Jersey 实现类似反向代理的实现。

 https://github.com/hhimanshusharma70/cors-escape

【参考方案3】：

正如错误所说，一个名为 Access-Control-Allow-Origin 的标头必须存在于 CORS 响应中。

由于 swapi.co 响应包含正确 CORS 请求的 Access-Control-Allow-Origin 标头（可以使用浏览器开发控制台中的简单 fetch('https://swapi.co/api/planets/') 进行测试），因此问题可能出在您的代理设置上。

尝试修改代理绕过方法中的响应：

   bypass: function (req, res, proxyOptions) 
      ...
      // Note that this is "res", not "req".
      res.headers["Access-Control-Allow-Origin"] = "*";
      ...
    

【参考方案4】：

你不能！故事结局。如果 api 的所有者决定不允许跨源请求，那么你不能。如果您不打算在https://swapi.co 域上托管您的应用程序，那么您将无法直接从 Angular 使用 api，您将需要从 .NET、Node、php 对服务器进行某种传递 api 调用， Java等