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


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


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


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