Failed to execute 'open' on 'XMLHttpRequest' : invalid URL

I’m new in ionic 3 , I try to make a login post to API,
here is my api provider

export class ApiProvider {

  private host_url : string = '//';

  constructor(private http: Http) {

    let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    let options = new RequestOptions({ headers: headers });
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', data.username);
    urlSearchParams.append('password', data.password);
    let body = urlSearchParams.toString()
    return'/login_check/', body, options)

  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  private handleErrorObservable (error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.message || error);

and this is my login.ts

    let loader = this.loadingController.create({
      content: "Sign in ...."
        data => {


it’s works fine on chrome but when I build in android device and try to test my login I got

Failed to execute ‘open’ on ‘XMLHttpRequest’ : invalid URL

when I debug on chrome inspect device console.
I also have installed whitelist plugin and have this meta-tag in my index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

I try to figure out for hours, please help guys…

console.log the URL you are trying to request before you actually do it.

This is an invalid URL // because your android device add ‘//’ to URL .

so I’ve to complete di URL like http:// or https:// ? let me try

it works now thanks @guadyass and @Sujan12 :smiley: .
I usually using // for angularjs web app and it works, and now I know it will not work on ionic . Thank you guys

1 Like