axios与vite因@angular-devkit/build-angular版本陷入循环更新困境

问题现象 #

axios与vite在@angular-devkit/build-angular的版本选择上产生冲突，执行npm audit fix --force会陷入循环：

• 执行npm audit fix时，提示axios存在跨站请求伪造漏洞，需降级@angular-devkit/build-angular到16.2.10修复
• 执行npm audit fix --force降级后，又提示vite存在XSS漏洞，需升级@angular-devkit/build-angular到17.0.7修复，同时伴随大量Angular核心包（如@angular/compiler-cli、typescript）的版本冲突警告

相关错误日志 #

第一次audit提示（需降级build工具）

$ npm audit fix

up to date, audited 1000 packages in 5s

119 packages are looking for funding
  run `npm fund` for details

# npm audit report

axios  0.8.1 - 1.5.1
Severity: moderate
Axios跨站请求伪造漏洞
可通过`npm audit fix --force`修复
将安装@angular-devkit/build-angular@16.2.10，属于破坏性变更
node_modules/axios
  localtunnel  >=1.9.0
  依赖存在漏洞的axios版本
  node_modules/localtunnel
    browser-sync  >=2.24.0-rc1
    依赖存在漏洞的localtunnel版本
    node_modules/browser-sync
      @angular-devkit/build-angular  >=17.0.0-next.0
      依赖存在漏洞的browser-sync版本
      node_modules/@angular-devkit/build-angular

4个中等严重程度漏洞

要修复所有问题（包括破坏性变更），请执行：
  npm audit fix --force

强制降级后的audit提示（需升级build工具）

$ npm audit fix --force
npm WARN using --force 已禁用推荐保护机制。
npm WARN audit 将@angular-devkit/build-angular更新至16.2.10，属于SemVer主版本变更。
npm WARN ERESOLVE 覆盖对等依赖
npm WARN 解析时：@angular-devkit/build-angular@16.2.10
npm WARN 已找到：@angular/compiler-cli@17.0.6
npm WARN node_modules/@angular/compiler-cli
npm WARN   来自@angular/localize@17.0.6的对等依赖@angular/compiler-cli@"17.0.6"
npm WARN   node_modules/@angular/localize
npm WARN     来自@ng-bootstrap/ng-bootstrap@16.0.0的对等依赖@angular/localize@"^17.0.0"
npm WARN     node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     还有1个来源（根项目）
npm WARN   还有1个来源（根项目）
npm WARN
npm WARN 无法解析依赖：
npm WARN 来自@angular-devkit/build-angular@16.2.10的对等依赖@angular/compiler-cli@"^16.0.0"
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN
npm WARN 冲突的对等依赖：@angular/compiler-cli@16.2.12
npm WARN node_modules/@angular/compiler-cli
npm WARN   来自@angular-devkit/build-angular@16.2.10的对等依赖@angular/compiler-cli@"^16.0.0"
npm WARN   node_modules/@angular-devkit/build-angular
npm WARN     根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN ERESOLVE 覆盖对等依赖
npm WARN 解析时：@angular-devkit/build-angular@16.2.10
npm WARN 已找到：@angular/localize@17.0.6
npm WARN node_modules/@angular/localize
npm WARN   来自@ng-bootstrap/ng-bootstrap@16.0.0的对等依赖@angular/localize@"^17.0.0"
npm WARN   node_modules/@ng-bootstrap/ng-bootstrap
npm WARN     根项目的@ng-bootstrap/ng-bootstrap@"^16.0.0"
npm WARN   还有1个来源（根项目）
npm WARN
npm WARN 无法解析依赖：
npm WARN 来自@angular-devkit/build-angular@16.2.10的可选对等依赖@angular/localize@"^16.0.0"
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN
npm WARN 冲突的对等依赖：@angular/localize@16.2.12
npm WARN node_modules/@angular/localize
npm WARN   来自@angular-devkit/build-angular@16.2.10的可选对等依赖@angular/localize@"^16.0.0"
npm WARN   node_modules/@angular-devkit/build-angular
npm WARN     根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN ERESOLVE 覆盖对等依赖
npm WARN 解析时：@angular-devkit/build-angular@16.2.10
npm WARN 已找到：@angular/platform-server@17.0.6
npm WARN node_modules/@angular/platform-server
npm WARN   根项目的@angular/platform-server@"^17.0.6"
npm WARN
npm WARN 无法解析依赖：
npm WARN 来自@angular-devkit/build-angular@16.2.10的可选对等依赖@angular/platform-server@"^16.0.0"
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN
npm WARN 冲突的对等依赖：@angular/platform-server@16.2.12
npm WARN node_modules/@angular/platform-server
npm WARN   来自@angular-devkit/build-angular@16.2.10的可选对等依赖@angular/platform-server@"^16.0.0"
npm WARN   node_modules/@angular-devkit/build-angular
npm WARN     根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN ERESOLVE 覆盖对等依赖
npm WARN ERESOLVE 覆盖对等依赖
npm WARN ERESOLVE 覆盖对等依赖
npm WARN 解析时：@angular-devkit/build-angular@16.2.10
npm WARN 已找到：typescript@5.2.2
npm WARN node_modules/typescript
npm WARN   来自@ngtools/webpack@16.2.10的对等依赖typescript@">=4.9.3 <5.2"
npm WARN   node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack
npm WARN     @ngtools/webpack@"16.2.10"来自@angular-devkit/build-angular@16.2.10
npm WARN     node_modules/@angular-devkit/build-angular
npm WARN
npm WARN 无法解析依赖：
npm WARN 来自@angular-devkit/build-angular@16.2.10的对等依赖typescript@">=4.9.3 <5.2"
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN
npm WARN 冲突的对等依赖：typescript@5.1.6
npm WARN node_modules/typescript
npm WARN   来自@angular-devkit/build-angular@16.2.10的对等依赖typescript@">=4.9.3 <5.2"
npm WARN   node_modules/@angular-devkit/build-angular
npm WARN     根项目的开发依赖@angular-devkit/build-angular@"16.2.10"
npm WARN deprecated @babel/plugin-proposal-unicode-property-regex@7.18.6: 该提案已并入ECMAScript标准，此插件不再维护，请使用@babel/plugin-transform-unicode-property-regex替代。
npm WARN deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: 该提案已并入ECMAScript标准，此插件不再维护，请使用@babel/plugin-transform-async-generator-functions替代。
npm WARN deprecated domexception@2.0.1: 请使用平台原生的DOMException替代。
npm WARN deprecated w3c-hr-time@1.0.2: 请使用平台原生的performance.now()和performance.timeOrigin替代。
npm WARN deprecated @wessberg/ts-evaluator@0.0.27: 该包已重命名为ts-evaluator，请安装ts-evaluator替代。

added 98 packages, removed 78 packages, changed 20 packages, and audited 1020 packages in 23s

123 packages are looking for funding
  run `npm fund` for details

# npm audit report

vite  4.4.0 - 4.4.11
Severity: moderate
Vite在`server.transformIndexHtml`中存在URL payload导致的XSS漏洞
可通过`npm audit fix --force`修复
将安装@angular-devkit/build-angular@17.0.7，属于破坏性变更
node_modules/@angular-devkit/build-angular/node_modules/vite
  @angular-devkit/build-angular  16.2.0-next.0 - 17.0.0-rc.5
  依赖存在漏洞的vite版本
  node_modules/@angular-devkit/build-angular

2个中等严重程度漏洞

要修复所有问题（包括破坏性变更），请执行：
  npm audit fix --force

解决方案 #

1. 保留Angular 17构建工具，强制升级axios到安全版本 #

漏洞根源是browser-sync依赖的localtunnel使用了有漏洞的axios版本，可通过npm overrides强制升级axios，无需降级@angular-devkit/build-angular：

• 安装安全版本的Angular构建工具：

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

• 在项目根目录的package.json中添加overrides字段，强制升级axios到>=1.6.0的安全版本：

  "overrides": {
    "axios": "^1.6.0"
  }
  

• 执行npm install，让overrides生效。

2. 验证修复结果 #

• 运行npm audit，确认axios和vite的漏洞均已修复
• 执行项目构建命令（如ng build），检查是否存在依赖报错

3. 替代方案：等待官方修复 #

如果上述方法无法解决，可等待Angular官方更新@angular-devkit/build-angular版本，彻底清理依赖链上的漏洞问题。

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