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

Question

I got run time error:

Failed to execute 'open' on 'XMLHttpRequest': Invalid URL Error: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL at http://localhost:8100/build/polyfills.js:3:2793 at XMLHttpRequest.open (eval at s (http://localhost:8100/build/polyfills.js:2:29793), :3:31)

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class Reviews {


  data: any;

  constructor(public http: Http) {
    this.data = null;
  }

  getReviews(){

    if (this.data) {
      return Promise.resolve(this.data);
    }

    return new Promise(resolve => {

      this.http.get('http://localhost:app/api/reviews')
        .map(res => res.json())
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });

  }

  createReview(review){

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    this.http.post('http://localhost:app/api/reviews', JSON.stringify(review), {headers: headers})
      .subscribe(res => {
        console.log(res.json());
      });

  }

  deleteReview(id){

    this.http.delete('http://localhost:app/api/reviews/' + id).subscribe((res) => {
      console.log(res.json());
    });    

  }

}

Answer 1

The problem is with your URL. Read the error message properly it's saying invalid URL

Here you are using localhost:app in your URL 'http://localhost:app/api/reviews' which is incorrect. You have to use some kind of open port number instead of random text. For example 3000, 4000, 5000, 8080, 8000, etc.

So your URL will be like this 'http://localhost:3000/api/reviews'

Answer 2

In my case, i'm facing the same problem in reactjs. I found that there was as typo in endpoint(http://:ip). so after correcting that. issue resolved