Angular，无法在“XMLHttpRequest”上设置“responseType”属性答案

【问题标题】：Angular, Failed to set the 'responseType' property on 'XMLHttpRequest'Angular，无法在“XMLHttpRequest”上设置“responseType”属性
【发布时间】：2022-06-10 20:49:36
【问题描述】：

在开发模式下，一切正常，但在构建和部署应用程序后，使用HttpClient 时出现此错误

ERROR DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document

在构建版本中，所有XMLHttpRequest都使用同步模式。

我手动更新了 main.ts 以向该函数 r.open(e.method,e.urlWithParams) 添加第三个参数“true”以强制异步模式，现在它可以正常工作了。

但我必须为每个新版本都这样做，我认为这不是解决该问题的更好方法。

这是我的服务

  private headers = new HttpHeaders({
    "Content-Type": "application/json",
    "dataType": "json",
    "Cache-Control": "no-cache, no-store, must-revalidate, post-check=0, pre-check=0",
    "Pragma": "no-cache",
    "Expires": "0"
  });

  constructor(private http: HttpClient) { }

  updateConfig(property: string, value: string): Observable<any> {
    var json_data = {
      ...
    };

    return this.http.post<any>(
      "url",
      json_data,
      { headers: this.headers }
    );
  }

以及我如何订阅它

  setPlatform(platform: any): void {
    this.sub = this.mfdAPIService.updateConfig("platform", platform)
      .subscribe(data => {
        this.router.navigate(["/configuration"]);
      });
  }

Angular CLI: 13.3.7
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

Angular: 13.3.10
animations, common, compiler, compiler-cli, core, forms
localize, platform-browser, platform-browser-dynamic, router

@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            7.5.5
typescript                      4.6.4

ERROR DOMException: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document.
    at n._subscribe (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:255555)
    at n._trySubscribe (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:4909)
    at http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:4854
    at Aa (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:2628)
    at n.subscribe (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:4768)
    at p (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:12547)
    at h (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:12487)
    at AT._next (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:8022)
    at AT.next (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:2877)
    at n._subscribe (http://10.12.27.7/aplpx/client/77eba8ab-826a-4f36-bb69-048b58feb376/main.43ef631b6c4e0013.js:1:11124)

当我运行 ng update

Using package manager: 'npm'
Collecting installed dependencies...
Found 30 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       13.3.7 -> 14.0.1         ng update @angular/cli
      @angular/core                      13.3.10 -> 14.0.1        ng update @angular/core

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.

【问题讨论】：

查看networks选项卡，请求是否成功完成？您是否看到从服务器返回的响应？
网络选项卡中没有任何内容，因为在准备 XMLHttpRequest 时发生错误。所以不会触发呼叫。使用完整控制台日志更新问题
尝试进行“ng 更新”并复制/粘贴提供的说明。

标签： angular asynchronous httprequest