Handling CORS Issues in Ionic

Question

I am creating an API with our API server script and am trying to communicate with the API on the IONIC framework application. I am working but it keeps on bringing up the cross-origin blocked error:

Solution 1

When developing locally using ionic serve or ionic run/emulate -l -c with livereload enabled, ionic creates a local dev server at port 8100 by default (http://localhost:8100/ ). The origin in this case is localhost:8100 , which when you contact an external service via HTTP with CORS enabled, they deem the request not trustworthy and therefor reject it.

As suggested by Ionic themselves (http://blog.ionic.io/handling-cors-issues-in-ionic/) , you can create a proxy alias within the Ionic app to route the API calls via, avoiding the origin issue altogether, however, their guide was specific for Ionic 1, so here is an update for Ionic v2.

Creating a Proxy in Ionic v2

Open ionic.config.json and add in the following proxies setup.

{
  "name": "project-name",
  "app_id": "xyz-projectid",
  "v2": true,
  "typescript": true,
  "proxies": [{
    "path": "/api",
    "proxyUrl": "https://the-real-api-host.com"
  }]
}

In this instance, we are creating a path within the ionic app at /api ,which will forward requests to the endpoint https://the-real-api-host.com . If you wanted to use a different api endpoint, for example http://my-custom-api.com/api/v2/ , you could insert it into proxyUrl instead.

Updating References to API Endpoint

In your app code, you now need to update all the references of the base URL for the API endpoint at https://the-real-api-host.com with /api . A call to /api should be detected when in Ionic serve, and proxied to the real address.

Each projects implementation may vary. In my case, I did not have control of the API, as it was an external service, so I could not control the CORS handling/responses myself.

Note: remember to restart the server (ionic serve) or you will get 404's from your API call because it will not yet be proxying.

Solution 2

If you have no way to change the server configuration, you should use Http native plugin to perform Http requests from your mobile device, to prevent cors problems. However, in web enviroment you still need to use Angular's HtttClient. Fortunately, with ionic-native-http-connection-backend library you can use the same HttpClient service for both enviroments, and Http native will be used internally if the app is executed from a mobile device. It's a kind of wrapper.

Solution 3

Creating proxy only works for when you run Ionic on your browser using ionic -serve. CORS issue is still a problem when you run on your device, specially on iOS with WKWebView.

In those cases, you can use Cordova's native HTTP plugin.

See here for details:

https://hackernoon.com/a-practical-solution-for-cors-cross-origin-resource-sharing-issues-in-ionic-3-and-cordova-2112fc282664

Solution 4

The issue is just during development phase ,the best way to deal with it is to install "Allow-Control-Allow-Origin" extension in chrome.

Solution 5

Cors error can only be resolved from server side. But yes for browser only we can resolved it by installing cors extension but for device can be only from server side

View more solutions

Comments

[Michael Smith]

Hello, Do you know whether this solution works for Ionic View

[Phillip Hartin]

Sorry @MichaelSmith I'm not sure, I haven't tried it with Ionic View.

[Hamid Araghi]

I have this issue in my real device and emulator; not only in browser.

[Musab]

Then allow CORS from back-end woocommerce API, refer to my answer - stackoverflow.com/questions/46777212/ionic-3-cors-issue/…

[Andrea Lazzarotto]

Brilliant! This answer should have 100+ upvotes. O.O

[Musab]

@AjayMistry allow it from server side then

[Ajay Mistry]

@Musab can you please guide me how can i allow it from server ??

[Huthaifah Kholi]

I really try to use ionic-native-http-connection-backend , unfortunately , the documentation doesn't help me to use it, can you help me , or share me some thing helpful?