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
– Shashank Vivek, Commented Nov 16, 2019 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
– Sae, Commented Nov 16, 2019 at 17:56
Access-Control-Allow-Origin is a response header developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…. It's invalid to include it in a request. — Marko Gresak
– Marko Gresak, Commented Nov 16, 2019 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
– Marko Gresak, Commented Nov 16, 2019 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
– Shashank Vivek, Commented Nov 18, 2019 at 6:20

Shashank Vivek · Accepted Answer · 2019-11-18 06:19:52Z

1

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

answered Nov 18, 2019 at 6:19

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrian Brand · Accepted Answer · 2019-11-18 06:37:17Z

1

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.

answered Nov 18, 2019 at 6:37

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Comments

Himanshu Sharma · Accepted Answer · 2019-11-16 18:25:54Z

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

Zoli Szabó · Accepted Answer · 2019-11-16 18:46:15Z

0

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"] = "*";
      ...
    }

answered Nov 16, 2019 at 18:46

Zoli Szabó

4,5851 gold badge16 silver badges22 bronze badges

Collectives™ on Stack Overflow

CORS policy error while calling remote URL in Angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related