CORS issue ourApi Server

474
January 26, 2017, at 05:09 AM

i am creating an API with ourApiserver script and am trying to communicate with the api on IONIC framework application i am working on but it keeps on bringing up the cross-origin blocked error

Answer 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.

Rent Charter Buses Company
READ ALSO
Glide: load image to push notifications

Glide: load image to push notifications

I am trying to load an image to a push notification using Glide but it says this:

933
Is it possible to extend some other class and implement RealmModel?

Is it possible to extend some other class and implement RealmModel?

I'm trying to extend my model from a BaseModel and then implement RealmModel

510
Error signing apk after moving to JDK 1.8 and SDK 25

Error signing apk after moving to JDK 1.8 and SDK 25

In order to add some new features to our app, we had to upgrade to SDK & Build-Tools 25 which also require updating to JDK 18

418
JUnit Testing with an API call

JUnit Testing with an API call

I'm trying to do is to test these with unit tests

387