在Angular中调用远程URL时发生CORS策略错误

Question

尝试调用远程API网址，但出现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，因此无法在服务器端进行任何更改。

Answer 1

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

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

Answer 2

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

a。您可以在网址前附加一个https://cors-anywhere.herokuapp.com/    它将暂时解决CORS问题。

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

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

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

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

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

Answer 3

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

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

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

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

Answer 4

你不能！故事结局。如果api的所有者已决定不允许跨源请求，那么您将不能这样做。如果您不打算在https://swapi.co域上托管应用，则将无法直接从Angular使用api，并且需要从.NET，Node， PHP，Java等。