How to fix DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL Angular HttpClient when calling a third party server/api?

Question

I am getting the following error:

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

when executing a GET request to debounce.com


import{HttpClient} from '@angular/common/http';

export {ThisClass} {

constructor(private http:HttpClient){
}

validateEmailBounce(email) {
    const url = 'https://api.debounce.io/v1/?api=my_api_key&email=' + email;
    console.log(url); // https://api.debounce.io/v1/?api=my_api_key&email=someone@email.com
    return this.http.get(url);
  }
}

if you use localhost then only use http:// before your localhost — nircraft, May 07 '19 at 16:25
Possible duplicate of [Angular 2 Failed to execute open on XMLHttpRequest: Invalid URL](https://stackoverflow.com/questions/42461174/angular-2-failed-to-execute-open-on-xmlhttprequest-invalid-url) — nircraft, May 07 '19 at 16:26

score 0 · Accepted Answer · answered May 07 '19 at 16:33

You might have to try encoding the URL arguments.

const url = 'https://api.debounce.io/v1/?api=my_api_key&email=' + encodeURIComponent(email);

Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

How to fix DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL Angular HttpClient when calling a third party server/api?

1 Answers1