[CLI3] Yet Another CORS Problem

Ionic Framework ionic-v3
1

Hey all! I’m trying to run my Ionic 3 app on my phone. I seem to be having some trouble connecting to an API using HTTP requests. I’m running into the infamous CORS problem. I’ve tried almost everything I read around the net and nothing seems to be working; In browser using ionic serve or on mobile using ionic cordova run android --livereload.

Yes, I did try adding a proxy:

{
  "name": "MyApp",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },"proxies": [
    {
      "path": "/subscribe",
      "proxyUrl": "https://www.ServerURLHere.com/subscribe"
    }
  ]
  
}

Yes, I did download the Chrome extension Extension Allow-Control-Allow-Origin: *.

But no luck whatsoever. Here is the console log from inspecting the app running on my Android phone:

image
image.png591×643 46.8 KB

Here’s the HTTP Request I’m posting:

    let method = '/subscribe';

    let data    : any = {"name":"Jane Doe"},

    ContentType : string = "application/x-www-form-urlencoded",
    UserAgent   : string = "request",
    Auth        : string = this.AccessToken,
    Accept      : string = "application/json",

    headers     : any    = new Headers({
                                        'User-Agent': UserAgent,
                                        'Authorization': Auth,
                                        'Accept': Accept,
                                        'Content-Type': ContentType
                                      }),
    options     : any     = new RequestOptions({ headers: headers }),
    url         : any     = this.MyURL + method;

    this.http.post(url, data, options) // Request stops here. Code doesn't even reach the console.logs.
    .subscribe(Feed =>
    {
      if(Feed.status === 200)
        console.log("Got the feed!");

      else
         console.log('Something went wrong!');
    });

Any help would be GREATLY appreciated!

2

Read the error message. It tells you exactly which response header is missing and why this is blocking your request. Add that header, problem solved.

3

Hey Sujan!
Thanks for your answer. Taking another look at the error it says that there is no ‘Access-Control-Allow-Origin’ header on the requested resources. From what I personally understand that means the API I’m calling is missing the above header. Is that correct?
But if you mean to say that I should include the header in my request payload, then I’ve already attempted to do so as such:

    headers     : any    = new Headers({
                                        'Access-Control-Allow-Credentials' : true,
                                        'Access-Control-Allow-Origin': this.MyURL, // Format: www.MyURL.com/api
                                        'User-Agent': UserAgent,
                                        'Authorization': Auth,
                                        'Accept': Accept,
                                        'Content-Type': ContentType
                                      }),

Which has spawned a similar error:
image

Please advise. Thank you.

4

No, the API has to respond with that header - it allows a specific Origin (in this case the one of the Ionic app) to get the data the request returns. Otherwise the “browser” (the webview in this case) will not forward the result to your app and throw this error message.

Many APIs allow you to set that value. If not, you will have to find a workaround (like a proxy on your server that does the actual request, adds the header and returns that to your app).

5

Unfortunately, I do not have control over this API whatsoever; I’m simply calling data from it.
I was able to make these calls via a NodeJS project, but the attempt was fruitless via Ionic.
Also as I mentioned in the first post, I did try to use a proxy to fix this problem but it didn’t affect the Ionic app’s behavior.

6

Read what I wrote again.

NodeJS doesn’t work in the context of a browser with the security restrictions this environment adds - so this is not an issue there. The proxy you tried to use is a different thing than what I suggested and doesn’t really help here.

7

Ah I did re-read what you posted and I’m not too excited about it :frowning:

Payload path:
Ionic App --> My Server (with proxy) --> API
And the response would be take the same road back to the app. Correct?
Doesn’t seem very… ‘Efficient’ might be the word? Is there no other way to do it?

8

If is a workaround for a security feature, those are not meant to be efficient :stuck_out_tongue:

https://ionicframework.com/docs/native/http/ might be an alternative.

2 Likes
9

AdvancedHttp? Sorta looks like the one that ships with ionic currently but I’ll gladly give it a try tomorrow! Thanks!

10

Ionic’s http is Angular’s http which is in TS/JS - native HTTP is… native code. Outside the context of the webview, so outside of these security considerations (at the cost of performance and complexity of course).

11

Worked like a charm! Thank you so much for your help! :smiley:

1 Like
12

https://ionicframework.com/docs/native/http/ only supports iOS and Android. In case you want to add browser platform, it won’t run. Check the link. https://ionicframework.com/docs/native/http/#platforms

the CORS issue is caused by option --livereload. I encountered same issue last time. Remove it and it shouldn’t give you any trouble.