IONIC2 , Angular 2 Http request error on device - access to file:// instead http://

Question

I have a problem with make request for my server in IONIC 2 App.

In ionic.config.json I 've set up proxies (my rest API is availabe directly from http://SERVER_ADDRESS.pl ):

"proxies": [{
    "path": "/rest",
    "proxyUrl": "http://SERVER_ADDRESS.pl"
}]

In my ts file I have:

this.http.get(`/rest/getmenu`)
.map(res => res.json())
.subscribe(res => {
        this.menus = res;
        console.log(this.menus);
    },
    err => {
        console.log(err);
        this.error = err;
    }
);

In config.xml I've added:

<allow-navigation href="*" />

When I start by "ionic serve" everything is ok, but when I run on emualtor I've got error. When I debugged on Chrome, I can see error:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///rest/getmenu

How fix it ?

I've installed cordova-plugin-whitelist (cordova-plugin-whitelist 1.2.3-dev "Whitelist") . My config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>V2 Test</name>
    <description>An Ionic Framework and Cordova project.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
</widget>

And ionic info:

Cordova CLI: 4.3.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS 
Node Version: v4.0.0

Rob Louie · Accepted Answer · 2016-04-20 21:06:50Z

2

The proxy setting is for testing in a browser only http://ionicframework.com/docs/cli/test.html.

Since ionic serve starts up a web server it can also create a proxy. When you deploy to a phone, there is no web server, just files in a folder, so there is no proxy. You will need to hit the URL directly or run your own proxy server that your app can hit.

answered Apr 20, 2016 at 21:06

Rob Louie

2,7011 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IceManSpy Over a year ago

Yes, you're right. If I use full address on emulator or device - it works. Also, I can disable CORS on "ionic serve".

Collectives™ on Stack Overflow

IONIC2 , Angular 2 Http request error on device - access to file:// instead http://

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related