How to Fix Ionic CORS Issues with Proxy or Native HTTP

When you encounter CORS issues with Ionic, there are several ways to fix the problem and make your Ionic API requests work.

You came here because you saw something like this:

Access to XMLHttpRequest at ‘https://whateverapi.com’ from origin ‘http://localhost:8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Usually the best way is to simply implement CORS on the server side, which is described for basically every language and framework here.

The main problem is: You are making a call from a domain that’s not the same as the server.

ionic-cors-issue-fail

For example, your Ionic app runs on localhost and your API on maindomain.com, and by default cross origin sharing within Javascript is blocked for security reasons.

With Javascript frameworks being very popular in the last years, this has become a problem for many Ionic developers although most APIs these days come with CORS support.

If you can’t implement CORS on the server side because it’s a public API that doesn’t want to add it or you can’t talk to the server team directly, here’s how you can still use these APIs with Ionic.


The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock

Current member? LOGIN