Ionic 2 extra '/' added on HTTP Post

I’m running into an issue when trying to talk to a REST server, where the HTTP request being sent out is adding an extra ‘/’ to the end of the URL. I setup ionic to use the ionic proxy to avoid the CORS issue you get when debugging on your local server. My ionic.config.json:

{ "name": "Example", "app_id": "", "v2": true, "typescript": true, "proxies":[{ "path": "/token", "proxyUrl": "http://localhost:3000/api/oauth/token", "rejectUnauthorized":false }] }

When the request is sent out instead of going to “http://localhost:3000/api/oauth/token” it’s going to “http://localhost:3000/api/oauth/token/”. The server I’m running it against will not accept the extra “/” at the end. I’ve include the example code for the login page below.

login.ts:

import {Component} from '@angular/core'; import {Http, Headers, Response} from '@angular/http';

@Component({
templateUrl: ‘build/pages/login/login.html’
})

/**

  • Constructor takes a configuration object.
  • @param http The HTTP injectable class
    */
    export class LoginPage {
    constructor (protected http:Http) {

}

getContentHeader() {
let contentHeaders = new Headers();
contentHeaders.append(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8’)
contentHeaders.append(‘Accept’, ‘application/json’);
contentHeaders.append(“Authorization”, "Basic " + btoa(“example:”));
contentHeaders.append(‘X-Requested-With’, ‘XMLHttpRequest’);
return contentHeaders;
}

login(event: Event, username: String, password: String) {
event.preventDefault();

// Retrieve the content headers.
let contentHeaders = this.getContentHeader();

// Setup the username and password in the body.
let body = 'grant_type=password&username='+username+'&password='+password;

 // Send the post request and wait for a response.
this.http.post('/token', body, { headers: contentHeaders })
  .subscribe(
    response => {
      // Store the token.
      localStorage.setItem('id_token', response.json().id_token);
      
    },
    error => {
      //Failed to Login.
      alert(error.text());
      console.log(error.text());
    }
  );

}
}

First, hasn’t ion.config.json deprecated?
Secondly, your local api server can be CORS compatible, search CORS + name of webserver.
In the client project use <access origin="*" /> with https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/ works better than using a proxy.

I think ionic.config.js was deprecated for ionic.config.json. I’m trying to debug locally on my computer’s web browser (Chrome) not on the device. The approach to use works for debugging on a devices, but if your using ionic serve to work locally it doesn’t work since Cordova isn’t involved.