On REAL iPhone Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

Ionic Framework ionic-v3
1

Hi,

I get a known error on implementing a http call to a json-file on a remote server.
Using ionic serve works oke. But not on a real iPhone.

XMLHttpRequest cannot load https://my.domain.nl/app/config.json. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

Since it’s a json file, I cannot add headers on the server site.

PLUGINS:

cordova-plugin-advanced-http 1.7.0 "Advanced HTTP plugin"
cordova-plugin-background-mode 0.7.1 "BackgroundMode"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.4-dev "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

IONIC INFO:

cli packages: (/Users/appcommbv/Ionic/abcd/node_modules)

    @ionic/cli-utils  : 1.15.1
    ionic (Ionic CLI) : 3.15.1

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 25.2.3
    ios-deploy        : 1.9.2 
    ios-sim           : 5.0.8 
    Node              : v8.0.0
    npm               : 5.0.0 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235 

Environment Variables:

    ANDROID_HOME : /Users/appcommbv/Library/Android/sdk

Misc:

    backend : legacy

SRCIPT CODE:

import { Injectable } from '@angular/core';
import { Http,Headers } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class LoadJsonProvider {

	data:any;
	playlist:any;
	newsitems:any;
	
	constructor(public http: Http) {
		console.log('Hello LoadJsonProvider Provider');
	}
	
	getConfig() {
		let headers = new Headers();
	    headers.append('Access-Control-Allow-Origin' , '*');
	    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
	    headers.append('Accept','application/json');
	    headers.append('content-type','application/json');		
	
		return this.http.get("https://my.domain.nl/app/config.json", { headers: headers})
		.map(response => {
			this.data = response.json();
			return(this.data);
		})
	}
}
2

That’s just wrong, configure your server to return the header for .json files.

3

I have the same issue when using XHR on an a real device. I also get:

Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

I have the whitelist plugin installed:

cordova-plugin-whitelist 1.3.1 “Whitelist”

I also tried the proxy option, but it didn’t work.

"proxies": [{
    "path": "/api",
    "proxyUrl": "http://some.url.com/path/api"
  }]
4

Same answer to you: You have to configure your server to respond with the correct Access-Control-Allow-Origin header.

5

Check out the FAQ of this page, especially the last ones.
It has to do with a changed WebView on iOS device (WKWebview).
It’s default with Ionic now.

1 Like
6

same issue … worked great before update .

7

Native http library saved my day, the last FAQ’s answer is the solution. Thanks for answer.

8

I also have the same issue.
When you remove the cordova-plugin-ionic-webview plugin the issue disappears.
But this is not a good solution since WKWebView (cordova-plugin-ionic-webview) should be preferred over the old UIWebView.

Normally the issue should only appear when used with “ionic serve”, “ionic lab” or “ionic cordova run -c”.
In your and my case the issue appears also when its run on the device without any server involved.

1 Like
10

To configure the server to respond with the correct Access-Control-Allow-Origin is not a good solution since one can not access every server.
This works only for servers which can be configured.
I don’t understand why the proxy solution isn’t working either.
I would like to use the WKWebView (cordova-plugin-ionic-webview) but I don’t see a workaround for this issue.

11

Did you manage to fix it?

12

To reiterate what @Sujan12 said, configuring the server to provide the Access-Control-Allow-Origin header is the best solution. CORS is a feature of browsers that blocks making a request to a different domain, i.e. if you are making a request from x.com to y.com it will be blocked unless y.com explicitly allows that by supplying the Access-Control-Allow-Origin header.

If you have control of the server you can add the appropriate header, if you don’t have control of the server and they don’t allow cross-origin access then it might not be the best idea use it.

Nonetheless, you can work around CORS without downgrading to UIWebView (which doesn’t enforce CORS) by using the native HTTP plugin to make your request.

2 Likes
13

Josh since the “CORS” thing is happening just with this new web view for iOS, how the native HTTP plugin works to bypass the webview?

14

CORS is a browser concept, by using the native HTTP plugin you are proxying your request through native code (i.e. the request is not made by the browser) so CORS doesn’t apply. Again, I don’t think this is the best solution but it does circumvent CORS.

2 Likes
15

Thx man, that helped!

16

I just read your article on this, very helpful. Link below.

So rather than setting the server to all:

Access-Control-Allow-Origin: *

Can we set it to allow just:

http://localhost

To restrict it to work with Ionic apps but not allow just any old domain access?
Or am I missing something here.