Angular生产构建部署后HttpClient报responseType设置失败如何解决

这是Angular 13.3.x系列@angular-devkit/build-angular构建工具的已知压缩bug：生产构建时Terser压缩器会错误移除XMLHttpRequest.open()调用的第三个async=true参数，导致XHR默认以同步模式发起请求。同步XHR不允许在open调用后修改responseType属性，就会触发你看到的DOMException。
开发模式下不会触发代码压缩，所以运行完全正常，和你手动给构建产物里的open调用加第三个参数true就恢复正常的现象完全匹配。你的业务层HttpClient写法、订阅逻辑、请求头配置都没有问题，不需要修改业务代码。

方案1：打全局补丁（零版本升级，立刻生效） #

直接在项目src/polyfills.ts文件末尾添加如下代码，强制重写XHR open方法的默认参数，无论构建后代码是否传async参数，都默认走异步请求：

// 修复生产构建XHR异步参数被压缩移除的问题
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (
  method: string,
  url: string,
  async: boolean = true,
  username?: string,
  password?: string
) {
  return originalXHROpen.call(this, method, url, async, username, password);
};

添加后重新执行构建即可，该补丁不会影响正常请求逻辑，对包体积影响可以忽略。

方案2：修复构建工具版本（永久根治） #

该bug在@angular-devkit/build-angular@13.3.8及以上的小版本中已经被修复，不需要跨大版本升级Angular，直接安装修复版本的构建依赖即可：

npm install @angular-devkit/build-angular@13.3.9 --save-dev

安装完成后删除node_modules/.cache目录，重新执行生产构建即可，不需要修改任何业务代码或配置。

方案3：调整构建压缩配置（不推荐，会增大包体积） #

如果暂时不想改代码也不想升级依赖，可以修改angular.json中生产环境的构建优化配置，关闭Terser的纯函数优化，避免参数被错误移除：
找到angular.json中projects.[你的项目名].architect.build.configurations.production节点下的optimization配置，修改为如下内容：

"optimization": {
  "scripts": {
    "minify": true,
    "pure": false
  },
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": true
}

该方案会关闭部分压缩优化规则，轻微增加生产包体积，仅作为临时备选方案。

不要尝试修改HttpClient的请求参数、请求头或者调整RxJS订阅逻辑，这些操作都无法解决问题——故障点出在构建压缩环节，和业务请求逻辑无关。

内容的提问来源于stack exchange，提问作者skander