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

If it's a 192.168.. type of url did you try to add a http:// or https:// in front of it? And if so, you're doing a cross domain request and need to enable CORS options on server side. — eko
– eko, Commented Feb 25, 2017 at 20:27

eko · Accepted Answer · 2017-02-25 21:12:03Z

49

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.

answered Feb 25, 2017 at 21:12

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eyoeldefare · Accepted Answer · 2017-11-19 01:14:26Z

21

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

answered Nov 19, 2017 at 1:14

eyoeldefare

2,3331 gold badge18 silver badges26 bronze badges

Comments

Nagender Chauhan · Accepted Answer · 2017-09-20 12:14:11Z

2

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

answered Sep 20, 2017 at 12:14

Nagender Chauhan

1091 silver badge2 bronze badges

Comments

Alexei - check Codidact · Accepted Answer · 2019-08-12 14:43:09Z

Another context when this error might happen is when using interceptors to set a base path. Something like the following:

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

  constructor(private logger: LoggingService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // one way is to except / include only some urls by checking request.url

    const clonedRequest = request.clone({
      withCredentials: true
    });

    // this.logger.logTrace("Sending with credentials request: ", request.urlWithParams);
    return next.handle(clonedRequest);
  }
}

If this interceptor fires when a request to a full http/https url is provided to the http client, it will construct an invalid URL.

Wajahath · Accepted Answer · 2021-02-19 14:59:49Z

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: ''

Dayán Ruiz · Accepted Answer · 2019-03-27 20:01:42Z

0

Possible scenarios:

Your api format is incorrect, it should be for example: http:localhost:8080/
In your api you don't have CORS enabled, so it is not accepting your requests
You have missing the / character at the end, in my case I had http:localhost:8080 and wasn't working because of the missing / at the end
You are using http instead of https or the opposite
You are creating the request for your credentials in the api incorrectly, this can be caused for errors in the code of the request from the frontend part (angular, react, ...)

answered Mar 27, 2019 at 20:01

Dayán Ruiz

6901 gold badge12 silver badges24 bronze badges

Comments

Vipin Raturi · Accepted Answer · 2020-07-07 06:33:06Z

0

For those people, who is trying to use POSTMAN and getting this error. please check the URL they are using. Copy that URL and paste in notepad to check.

In my case when I was copying my method name from some other place, it had space on it and postman was not showing me correctly. Once I removed space, it worked fine.

answered Jul 7, 2020 at 6:33

Vipin Raturi

535 bronze badges

Comments

Dharman · Accepted Answer · 2021-06-01 00:40:54Z

0

In my case i solved this issue by adding the '/' before my api initially it was const url = environment.api + 'api/relay'; i changed to const url = environment.api + '/api/relay';

and it works.

edited Jun 1, 2021 at 0:40

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Jun 1, 2021 at 0:35

amaroko

361 silver badge6 bronze badges

Comments

Francisco Javier Deler O Farri · Accepted Answer · 2021-12-30 21:49:28Z

0

Well I changed ' to " in the URL example.

'GET', environment.apiEndpoint + '/xxx/api/v1/xxx'`

to

"GET", environment.apiEndpoint + "/xxx/api/v1/xxx"

edited Dec 30, 2021 at 21:49

user17242583

answered Dec 29, 2021 at 22:38

Francisco Javier Deler O Farri

111 bronze badge

Comments

Nelio Alves · Accepted Answer · 2023-02-16 12:18:26Z

0

In my case it was using Axios, and the method name had a blank space:

method: 'POST '

I just had to delete the blank space:

method: 'POST'

answered Feb 16, 2023 at 12:18

Nelio Alves

1,37117 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular 2 Failed to execute open on XMLHttpRequest: Invalid URL

Help :( and thank you

10 Answers 10

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Help :( and thank you

10 Answers 10

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related