Ionic 3: No 'Access-Control-Allow-Origin' header iOS Only

Ionic Framework ionic-v3
1

I have a json file on my server : https://www.mysite.com/json/test.json

that im trying to pull in my app but im getting the:
Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

Now i tried Setting up the proxy urls like stated here:
https://blog.ionicframework.com/handling-cors-issues-in-ionic/

But im not sure what the URL has to be. Does it have to match the url thats getting the json file like so?:

{
  "name": "TestApp",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path": "/json/",
      "proxyUrl": "https://www.mywebsite.com/json/"
    }
  ]
}
2

Ok so i figured it out but i’m still getting a 404 not found error.

{
  "name": "TestApp",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path": "/json",
      "proxyUrl": "https://www.mywebsite.com"
    }
  ]
}

and im calling it in my service like so:

//: News
    getNews () {
        return this.http.get('../json/news.json').map(response => response.json());
    }

Its in my server, Why is it saying not found?

3


This is your friend!

4

Thanks but I need it to work on my iOS and Android device. Not only on chrome. It seems that its looking for the file within then project not the website i gave it in the proxy settings. So the proxy settings arent working.

5

You won’t have CORS issues on the device.

You can test it by running the ionic cordova run android command to test it on the device.

CORS is a restriction that the browser enforces via that it sends as a small string in the header that says that this is a Cross Origin Reference. You can handle the CORS problem in the browser by disabling it on the browser with the plugin I just gave you for chrome or you can enable CORS on your server to enable people to make requests for resources even if has the CORS header.

6

Thank you for your reply, but when i run it on my android I get the error:
GET file:///android_asset/json/news.json net::ERR_FILE_NOT_FOUND

and on iOS i get the error:
Failed to load resource: the server responded with a status of 404 (Not Found)

7

Now if i use just the whole url in my service:

getNews () {
this.http.get('https://www.mysite.com/json/news.json').map(response => response.json());
    }

I have no problem working on android but on ios get the error of:
[Error] Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. (news.json, line 0)
XMLHttpRequest cannot load https://www.mysite.com/json/news.json due to access control checks.

8

I am a bit confused by your question.

When you say IOS, are you running it in your browser on the Mac or are you creating an xcode project and trying to get the data from that end point? I think you are running it on a browser.

When you load the application to android, the request is not bound with a CORS header.

To understand CORS better look at this -

You can’t use

If you do that the request will look for the file locally. If you need to access your end point you need to include the whole URL.

9

Thanks! for clearing it up for me. Sorry for the confusion, I mean to say that on android its working fine. I used android studio to run it on my physical device. It works fine.

But when I use Xcode to run the app on my physical iPhone device, it still does not work. I fixed the getNews function to the whole URL as you suggested. But it still does not show on my ios physical device after running the app through xcode. I get an error of:
HTTP GET ERROR: Response with status: 0 for URL: null

Here is how the code looks like:

"proxies": [
    {
      "path": "/json/",
      "proxyUrl": "https://www.mysite.com"
    }
  ]

the service:

getNews () {
  
        return this.http.get('https://www.mysite.com/json/news.json').map(response => response.json());
 
    }

So it still does not work for ios but it does for android.

12

Found the solution!! Here it is for just in case anyone needs it! :grin::+1:

3 Likes
13

https://www.mywebsite.com/json/

is that addres showing output json ?

14

i have this issue in bearer token from c#
api call from controller will be back but for token i have corss issue
content-type is application/x-www-form-urlencoded
response type is json

15

First, open config.xml and add the following properties

<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

then run the following commands – I hope you are familiar with this commands

ionic cordova plugin remove cordova cordova-plugin-ionic-webview --save
rm -rf platforms/
rm -rf plugins/
ionic cordova build ios

1 Like
16

This is not recommended solution. It is mainly decrease performance.

1 Like
17

i have this extension to my chrome but still i cant get my data into my app a little help is greatly needed

18

I am having the same issue on iOS…resolved it by going back to UIWebView - but I don’t see this as a fix.

On Android, I first compiled my app, and it worked fine on the device. However when I started messing with ionic cordova run android --device --livereload it somehow introduced the No Access-Control-Allow-Origin header issue.

But isn’t there a better solution to this? How can we test, on devices, with the newer cordova-plugin-ionic-webview if this is going to cause errors for external api/resouce calls?