Ionic CLI - "serve" CORS proxy not working

ionic-v1
1

I’m developing an app that accesses data from a server. When I use ionic serve to run the app, I get a CORS error in the console. The Ionic CLI docs indicate that I should be able to add a proxy to my ionic.project file and then I’ll be able to access “http://something.com/v1” at “/v1” in my app. Wen I add the proxy to my project configuration, however, I get a “404 not found: http://localhost:8081/chapelcredit”. Here’s the code I’m using:

ionic.project:

{
    "name": "Some App",
    "app_id": "",
    "gulpStartupTasks": [
        "sass",
        "watch"
     ],
    "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ],
  "proxies": [
    {
      "path": "/chapelcredit",
      "proxyUrl": "https://data.somedomain.com:5000/chapelcredit"
    }
  ]
}

$http call in controller, assume userCredentials is declared:

$http({
    method: 'POST',
    url: '/chapelcredit',
    data: userCredentials
}).
success(function(data, status, headers, config) {
   $scope.chapelCredit.credit = data.credit;
}).
error(function(data, status, headers, config) {
    $scope.chapelCredit.credit = status;
});
2

There is no need to change your code when you get a CORS error. This error happens because when the server blocks http requests if they are on another domain or a subdomain.
you can’t make a get request from to http://www.google.com from http://localhost.
this is not the case when you’ll install the app on the device since in the device the address is file://localhost.

bottom line: try to install this on your device. if you want to test your app on your computer see this thread:[SOLVED] CORS with Ionic

3

I got the same problem. Does anyone know why the proxy not work?

4

Check this out http://blog.ionic.io/2015/02/24/handling-cors-issues-in-ionic/

5

I had the same problem.

I was trying to use a custom login authentication like

this.logInAuth = function(data, successCB, failureCB) {
        $http.get('/mobile' + 'login/' + data.username + '/' + data.password).success(function(data) {})
.error(function(data, status, headers, config) {
            console.log(status)
        });
    };

With the proxy set as

    {
  "path": "/mobile",
  "proxyUrl": "http://somedomainname.com/somecontext"
}

Turned out I had made a mistake in the proxyUrl field.

When I entered the right domain name the success callback of the http get function was activated. With a username and password combination which was known to be valid (xyx/xyz) the login was successfully completed.

Interestingly, if my username and password combination was entered wrongly (xyz/xyz1) the console log showed the following

GET http://localhost:8100/mobile/login/xyz/xyz1 500 (Internal Server Error)

I might be way off mark here but it seems to me that the proxy URL is only adopted if the path entered is valid.

6

Make sure you restart the “ionic serve” everytime you change the proxies
in the ionic.project file, because this does not get automaticly
reloaded while running “ionic serve”.

I was developing with “ionic serve” running and changed the proxies and got the 404. After a restart of “ionic serve” it started working.

1 Like
7

still having the same problem here.
Restarted the ionic serve, but instead of my api link defined on ionic.project,
http://localhost:8100 is used for every http request. Any updates on this?

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v4.0.0