URLSearchParams Appending extra & to url parameters Angular2+Ionic2

Question

So, this is my first post on stackoverflow, so please forgive me if I just didn't search for this hard enough but...

I am building a simple login page on our companies Ionic2 + Angular2 App. The login form makes an http call to our backend which responds with the credentials of the user if they are correct, then the user is allowed onto the homepage, if not they receive a 401 error.

Last night when I finished wiring it up on a windows machine everything worked perfectly. However at work we use Macs and so when I ionic run android and/or ionic serve --lab it the api calls are not being appended correctly with the parameters. To show:

private theUrl = 'http://theurl.com/mobileapi/getUser.cfm?';

public onlogin(email: string, password: string) {
  let params: URLSearchParams = new URLSearchParams();
    params.set('email', email);
    params.set('password', password);

  return this.http.get(this.theUrl, { search: params })
    .map(res => res.json())
}

This code uses URLSearchParams to set the URL parameters and then passes them directly into the http.get() request as an option. - We pass the email and password in from the front end angular form.

Now when the app is served/ran the API call ends up looking like this:

http://theurl.com/mobileapi/getUser.cfm?&email=xxxx&password=xxxxx

The point I am interested in is the .cfm?& part of the url. I know its not supposed to be formatted like that for a call... Am I missing something here to format the url params properly?

Thanks

Tiep Phan Tiep Phan · Accepted Answer · 2017-02-11T07:23:42

because your url have ? -> private theUrl = 'http://theurl.com/mobileapi/getUser.cfm?'; so when Angular build params, it'll mark as have param, then this'll append the url as you got.

using this instead:

private theUrl = 'http://theurl.com/mobileapi/getUser.cfm';

URLSearchParams Appending extra & to url parameters Angular2+Ionic2

1 Answers