CORS policy error while calling remote URL in Angular

Question

Try to call remote API Url but, getting Access-Control-Allow-Origin error. I tried many things like following but, nothing works.

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;

Running with ng serve --port 8090 --proxy-config proxy.conf.js

Can't make any changes in server side because I am using third party API.

there is a chrome plugin that can help u with cors error. you'll find it over google. let me know if that has worked — Shashank Vivek, Nov 16 '19 at 17:46
I have similar issue, but many of it just need to configure in the server itself to allow CORS, in your case you need to ask the third party to help check it for you. — Sae, Nov 16 '19 at 17:56
`Access-Control-Allow-Origin` is a response header https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin. It's invalid to include it in a request. — Marko Gresak, Nov 16 '19 at 17:58
"Can't make any changes in server side because I am using third party API." Looks like the server response is not configured correctly, either deliberately or unknowingly. If you can't modify the headers or get the author to make the change, the workaround is to set up own proxy server to pass the request and then respond with request + correct CORS headers. — Marko Gresak, Nov 16 '19 at 18:00
@ketan : Awesome . added it as an answer because this question is very frequent on stackoverflow. Hope it'll help other as well. Cheers ! — Shashank Vivek, Nov 18 '19 at 06:20

score 1 · Accepted Answer · answered Nov 18 '19 at 06:19

Try adding plugin like https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en in your chrome browser.

Since you cant change the server side config, so this plugin can do the trick. The browser by default blocks CORS

score 0 · Answer 2 · answered Nov 16 '19 at 18:25

Since You cannot make any changes on remote server. So it can be escaped using Reverse proxy server. I also faced the same issue while calling linkedin services.

a. There is an https://cors-anywhere.herokuapp.com/ you can append this before your url and it will temporarily resolve CORS issues.

Since in enterprise scenario you can not use herokuapp.com before your application specific names so better to set below proxy server.

b. Second approach is using rever-proxy approach and set up your own server (local or remote ) for reverse proxying.

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

You can also implement reverse-proxy like implementation using Spring and Jersey.

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

score 0 · Answer 3 · answered Nov 16 '19 at 18:46

As the error says, a header named Access-Control-Allow-Origin must be present in a CORS response.

Since swapi.co responses include the Access-Control-Allow-Origin header for correct CORS requests (can be tested with a simple fetch('https://swapi.co/api/planets/') from your browser's dev console), the issue may be because of your proxy settings.

Try modifying the response in the proxy bypass method:

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

score 0 · Answer 4 · answered Nov 18 '19 at 06:37

You can't! End of story. If the owner of the api has decided not to allow cross origin requests then you can't. If your are not going to host your app on the https://swapi.co domain then you will not be able to use the api directly from Angular and you will need some kind of pass through api call on the server from .NET, Node, PHP, Java etc.

CORS policy error while calling remote URL in Angular

4 Answers4