我尝试通过将我的 API 层代理到 API URL 来使用 Angular 的热重载。因此，我在项目的根目录中使用 proxy.conf.json 文件，其中包含以下内容。
{
"/accounts/rest": {
"target": "https://www.k8s.local:19443",
"secure": false
}
}
但是，当我运行
npm startnpm run build-themes && ng serve --proxy-config proxy.conf.json$ npm start
> @source/[email protected] start
> npm run build-themes && ng serve --proxy-config proxy.conf.json
> @source/[email protected] build-themes
> sass --no-source-map themes:src/assets
⠋ Generating browser application bundles (phase: setup)...An unhandled exception occurred: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}
See "/private/var/folders/rk/7x0cwmtd009024nm3qdz9jxr0000gn/T/ng-hbNTSd/angular-errors.log" for further details.
✔ Browser application bundle generation complete.
完整的堆栈跟踪是：
[error] Error: [HPM] Missing "target" option. Example: {target: "http://www.example.org"}
at verifyConfig (/Users/amatthews/src/WEB/accounts-client/node_modules/http-proxy-middleware/dist/configuration.js:7:15)
at new HttpProxyMiddleware (/Users/amatthews/src/WEB/accounts-client/node_modules/http-proxy-middleware/dist/http-proxy-middleware.js:131:42)
at createProxyMiddleware (/Users/amatthews/src/WEB/accounts-client/node_modules/http-proxy-middleware/dist/factory.js:6:28)
at getProxyMiddleware (/Users/amatthews/src/WEB/accounts-client/node_modules/webpack-dev-server/lib/Server.js:2239:18)
at /Users/amatthews/src/WEB/accounts-client/node_modules/webpack-dev-server/lib/Server.js:2280:12
at Array.forEach (<anonymous>)
at Server.setupMiddlewares (/Users/amatthews/src/WEB/accounts-client/node_modules/webpack-dev-server/lib/Server.js:2267:28)
at Server.initialize (/Users/amatthews/src/WEB/accounts-client/node_modules/webpack-dev-server/lib/Server.js:1892:10)
at Server.start (/Users/amatthews/src/WEB/accounts-client/node_modules/webpack-dev-server/lib/Server.js:3358:16)
我的 Angular 版本是
Angular CLI: 17.3.8
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64
Angular: 17.3.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.8
@angular-devkit/build-angular 17.3.8
@angular-devkit/core 17.3.8
@angular-devkit/schematics 17.3.8
@angular/cdk 16.2.14
@angular/cli 17.3.8
@schematics/angular 17.3.8
rxjs 6.6.7
typescript 5.4.5
zone.js 0.14.7
当我“构建”我的项目并在 https://www.k8s.local:19443 URL 上运行它时，它工作得很好，并且对 https://www.k8s.local:19443 进行了 API 调用解决就好了。问题是启动命令无法识别目标。我尝试将代理文件放在项目的根目录以及 src 中（并更新代理路径）。我还尝试在代理文件中包含更多选项，如下所示：
{
"/accounts/rest": {
"target": "https://www.k8s.local:19443",
"pathRewrite": {"^/accounts/rest" : ""},
"logLevel": "debug",
"changeOrigin": true,
"headers": {
"Connection": "keep-alive"
}
}
}
但这也行不通。
想法？
看起来您的代理配置正确，但错误消息表明代理设置的处理方式可能存在问题。以下是一些故障排除步骤和建议，可帮助您解决问题：
检查代理配置格式 确保 proxy.conf.json 文件格式正确。您的第二个示例大部分是正确的，但请确保没有语法错误（例如尾随逗号）。这是一个干净的版本：
{ “/账户/休息”：{ “目标”：“https://www.k8s.local:19443”， “安全”：假， "pathRewrite": { "^/accounts/rest": "" }, "logLevel": "调试", “更改来源”：正确， “标题”：{ “连接”：“保持活动” } } }
正确的文件放置位置 proxy.conf.json 文件应放置在 Angular 项目的根目录中。这通常是 package.json 文件所在的位置。
验证命令用法 确保您的 npm start 命令在 package.json 中正确设置。它应该看起来像这样：
“脚本”：{ "start": "npm run build-themes && ngserve --proxy-config proxy.conf.json", “build-themes”：“sass --no-source-map 主题：src/assets” }
检查 Angular CLI 版本兼容性 由于您使用的是 Angular CLI 版本 17，请确保您的 Angular 项目与此版本兼容，并且代理配置中没有重大更改。
验证API路径 确保您尝试代理的 API 路径 (/accounts/rest) 与您在 Angular 应用程序中调用 API 的方式完全匹配。任何不匹配都可能导致代理配置无法触发。
调试信息 由于您已启用 logLevel: "debug"，请检查控制台输出以获取有关启动服务器时发生的情况的更多详细信息。这可能会让您深入了解代理配置是否被识别。
使用简单代理进行测试 作为最后的手段，您可以使用代理配置的简化版本进行测试。尝试一些最小的东西看看它是否有效：
{ “/api”：{ “目标”：“https://www.k8s.local:19443”， “安全”：假 } }
然后更改您的 API 调用以匹配新路径（例如 /api/accounts/rest）并查看是否可以解决问题。
更新节点和 Angular CLI 确保您使用的是 Node.js、Angular CLI 和其他依赖项的兼容版本。有时更新到最新版本可以解决由早期版本中的错误引起的问题。
重新启动您的开发服务器 更改代理配置后，请确保停止并重新启动开发服务器。有时更改可能需要重新启动服务器才能生效。