如何修复 DOMException：无法在“XMLHttpRequest”上执行“打开”：调用第三方服务器/api 时 URL Angular HttpClient 无效？答案

【问题标题】：How to fix DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL Angular HttpClient when calling a third party server/api?如何修复 DOMException：无法在“XMLHttpRequest”上执行“打开”：调用第三方服务器/api 时 URL Angular HttpClient 无效？
【发布时间】：2019-09-25 08:38:10
【问题描述】：

我收到以下错误：

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

执行GET 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);
  }
}

【问题讨论】：

如果你使用 localhost，那么只在你的 localhost 之前使用 http://
Angular 2 Failed to execute open on XMLHttpRequest: Invalid URL的可能重复

标签： javascript angular xmlhttprequest

【解决方案1】：

您可能必须尝试对 URL 参数进行编码。

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

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

【讨论】：