Angular 2 Failed to execute open on XMLHttpRequest: Invalid URL

Question

I'm trying to call a service, it's works in DHC, but when I try to call in my angular 2 project, it crash, the method request is POST, receive an object from body who has a email and password, and the response is a token, that I will use in the entire project for authorization.

Here is my code.

import { Injectable } from '@angular/core';
import { Http, Response, Headers, Request ,RequestOptions ,RequestMethod } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class LoginService {
      constructor(private http:Http) { 
      }

  getToken(){
    var baseUrl = "xxx.xxx.x.xxx:xxxx/project/v1/admin/login";
    var headers = new Headers();
    headers.append("Content-Type", 'application/json');
    var options = new RequestOptions({ headers: headers });
    var objeto = {'email': 'xxxxxx', 'pass':'xxxx' } 
    var body2 = JSON.stringify(objeto);
    var xhr = new XMLHttpRequest();
    return this.http
       .post(baseUrl, body2, options)
       .map((response: Response) => response.json())
       .subscribe(
           data => console.log('Success uploading the opinion '+ data, data),
           error => console.error(`Error: ${error}`)
       );
  }
}

I try to implement XMLHttp Request call from angular 2, but the error is the same, I don't know if I can using it in angular 2, here is the method

return Observable.fromPromise(new Promise((resolve, reject) => {
  //  let formData: any = new FormData();     
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.response));
            } else {
                reject(xhr.response);
            }
        }
    }
    xhr.open("POST", baseUrl, true);
    xhr.send(body2);
}));

Help :( and thank you

Solution 1

If it's a 192.168.. type of url you should add a http:// or https:// in front of it. And you may need to enable CORS options on server side.

Solution 2

In my case, I was able to solve it by fixing the url for my http request from the client side instead of the serverside as echonax mentioned from missing http:// from localhost.

My issue was, in my request this.http.get(this.domain + '/api/prod/' + id).map(res => res.json())

I was missing a / from the front side of api. It should be /api

Solution 3

if you use localhost then only use http:// before your localhost

Solution 4

If none of the said methods work, look for hidden characters in your string.

So in my case this was mysterious. I copied my url from a website but a hidden character also copied with the string, which is not visually visible.

"http://localhost:3000​/addresses​/create" // bad url
"http://localhost:3000/addresses​/create" // good url

Can't believe? Try this in the browser console

"http://localhost:3000​/addresses​/create" === "http://localhost:3000/addresses​/create"
// => false

There is a mysterious character right here in the string:

"http://localhost:3000​/addresses​/create"
//                    ^==> we have a hidden character here.

To feel it, copy the url to your editor and use right arrow to navigate from left to right. At the shown position, you have to press the right arrow key one extra time.

For record, the hidden character is inside this quotes: '​'

View more solutions