1. Angular6 本地开发跨域联调的真实痛点Angular6 反向代理 实现跨域开发本质上是把浏览器发出的同源请求交给 dev-server 转发到真实后端从而绕开浏览器同源策略。你在本地ng serve跑 Angular 应用时页面地址是http://localhost:4200而接口服务往往在另一个域名或端口上。浏览器一旦发现请求的协议、域名、端口三者有一个不同就会判定为跨域直接拦截响应控制台抛出Access to XMLHttpRequest at ... from origin http://localhost:4200 has been blocked by CORS policy。这个报错跟你的 Angular 代码写得对不对没关系是浏览器安全模型在起作用。很多人的第一反应是让后端加Access-Control-Allow-Origin响应头。但现实里后端可能是第三方服务、可能是统一的大模型 API 网关、也可能你根本没有权限改它的响应头。这时候 Angular CLI 内置的 webpack-dev-server 代理就成了最省事的方案浏览器只跟localhost:4200通信dev-server 在 Node 层把请求转发出去Node 之间没有同源策略跨域问题自然消失。这篇聚焦的场景很具体Angular6 项目本地开发用proxy.conf.json把接口请求代理到 TaoToken 的统一 Key/API 通道。TaoToken 是一个聚合多家大模型能力的 API 平台你申请一个 Key 就能调用不同厂商的模型接口地址统一在https://taotoken.net/api。本地联调时前端直接请求这个地址同样会遇到跨域所以正好用反向代理把它接进来。适合谁看正在用 Angular 做 AI 应用前端、需要本地调模型接口、又不想在后端折腾 CORS 的开发者。下面从零给出可复制的配置和验证步骤。2. TaoToken 前置准备Key、Base URL 与模型 ID在动proxy.conf.json之前先把 TaoToken 侧的三件套准备好否则代理配好了也会收到 401。这三件套是Base URL、API Key、Model ID。它们分别对应请求发往哪里、用什么身份、调用哪个模型。Base URL 用https://taotoken.net/api注意这里不带任何查询参数代理配置里的 target 就填它。API Key 需要到控制台创建路径是https://taotoken.net/console登录后在 API Keys 页面新建一个复制出来形如sk-开头的一串字符。这个 Key 只显示一次建议先存到本地环境变量或密码管理器里。Model ID 取决于你要调哪个模型可以在模型对话页面先试跑一次确认模型名称拼写正确比如常见的对话模型 ID 会写在文档里。这里有个容易踩的坑很多人把 Key 直接写进proxy.conf.json或者前端代码里然后提交到 Git。代理配置本身不承载鉴权鉴权应该由前端请求头携带或者由代理在转发时注入。更稳妥的做法是前端在请求拦截器里统一加Authorization: Bearer 你的KeyKey 从 Angular 的environment.ts读取而environment.ts在.gitignore里排除掉本地覆盖版本。如果你只是想快速验证代理通不通也可以先临时把 Key 放在请求头里手动测一次。另外提醒一点TaoToken 的接口是标准的 OpenAI 兼容风格路径通常是/v1/chat/completions。所以最终前端请求的完整地址是https://taotoken.net/api/v1/chat/completions。代理配置要做的就是把你本地的某个前缀比如/api映射到这个地址上。理解了这个映射关系后面的pathRewrite就不会写错。如果你还没创建 Key可以先打开https://taotoken.net/api-keys这个 deep link 直达创建页省得在控制台里找。创建完记得把 Key 和 Model ID 记下来下一步配置里会用到。3. 可复制配置proxy.conf.json 与 angular.json 片段这一节是全文的核心给出可以直接粘贴的配置。先建文件再改angular.json最后说明每个字段为什么这么写。在 Angular 项目根目录和angular.json同级新建proxy.conf.json内容如下{ /api: { target: https://taotoken.net/api, secure: true, changeOrigin: true, logLevel: debug, pathRewrite: { ^/api: } } }逐字段解释。/api是匹配前缀意思是前端所有以/api开头的请求都会被代理接管。target是转发目标填 TaoToken 的 Base URL。secure: true表示对 HTTPS 目标做证书校验TaoToken 是正规 HTTPS 服务保持 true 即可如果你代理的是自签名证书的本地服务才需要设 false。changeOrigin: true会把请求头里的 Host 改成目标域名很多网关会校验 Host不开这个容易 403。logLevel: debug会在终端打印每条代理日志联调阶段非常有用上线前可以删掉。pathRewrite把开头的/api去掉因为 target 里已经带了/api不去掉就会变成/api/api/v1/...这是最常见的 404 来源。接着改angular.json。找到projects下你的项目名再找到architect.serve.options加上proxyConfig字段serve: { builder: angular-devkit/build-angular:dev-server, options: { browserTarget: your-app-name:build, proxyConfig: proxy.conf.json }, configurations: { production: { browserTarget: your-app-name:build:production } } }把your-app-name换成你angular.json里真实的项目名通常在文件顶部projects的第一个键就是。proxyConfig的值是相对项目根目录的路径如果你把文件放到src/下这里就要写src/proxy.conf.json。Angular6 到 Angular11 用的是browserTargetAngular12 之后改成了buildTarget如果你升级过 CLI 发现启动报browserTarget相关错误把它改成buildTarget即可。配置完成后前端代码里请求就写相对路径/api/v1/chat/completions不要写完整域名。比如用 Angular 的 HttpClientthis.http.post(/api/v1/chat/completions, { model: your-model-id, messages: [{ role: user, content: 你好 }] }, { headers: { Authorization: Bearer environment.taoTokenKey, Content-Type: application/json } }).subscribe(res console.log(res));这样浏览器看到的是http://localhost:4200/api/v1/chat/completions同源不触发 CORSdev-server 收到后转发到https://taotoken.net/api/v1/chat/completions带上你注入的 Authorization 头。整个链路就通了。4. 启动 dev server 并验证跨域请求成功配置写好后重启 dev server 让angular.json的改动生效。注意是重启不是热更新proxyConfig属于构建配置热更新不会重新读取。命令ng serve启动后终端会打印编译信息如果logLevel设了 debug你会在请求发生时看到类似[HPM] POST /api/v1/chat/completions - https://taotoken.net/api/v1/chat/completions的日志。这行日志就是代理生效的直接证据。验证分两步。第一步用 curl 直接打本地 dev-server确认代理转发链路通curl -i -X POST http://localhost:4200/api/v1/chat/completions \ -H Authorization: Bearer sk-你的Key \ -H Content-Type: application/json \ -d {model:your-model-id,messages:[{role:user,content:ping}]}如果返回 200 和一段 JSON说明代理、鉴权、模型调用全部正常。如果返回 401是 Key 问题返回 404多半是pathRewrite写错导致路径重复返回 502 或连接超时检查 target 是否可达。第二步在浏览器里验证。打开http://localhost:4200在页面里触发一次接口调用然后打开 DevTools 的 Network 面板。找到那条请求看 Request URL 应该是http://localhost:4200/api/v1/chat/completionsStatus 是 200Response 里有模型返回内容。同时看 Console应该没有任何 CORS 相关红字。这两点同时满足跨域联调就算成功了。我试过在 Network 面板里对比代理前后的差异代理生效时请求的 Remote Address 显示的是本地 dev-server 地址而不是 TaoToken 的 IP因为浏览器根本没直接连 TaoToken。这也解释了为什么跨域消失了——浏览器视角里它只跟同源的 localhost 说话。如果你用的是 Angular 的HttpClient加拦截器统一注入 Key验证时可以在拦截器里console.log一下最终请求头确认 Authorization 确实带上了。有时候 Key 读成了undefined请求会以匿名身份发出返回 401但代理日志看起来一切正常容易误判成代理问题。5. 本篇常见报错排查401、404、proxy failed 与 OAuth联调阶段最常见的几类报错这里逐个对照真实错误信息给排查路径。第一类401 Unauthorized响应体通常是{error:{message:Invalid API key}}。原因只有两个Key 没带或者 Key 错了。检查请求头Authorization是否是Bearer sk-xxx格式Bearer 和 Key 之间有一个空格少空格会解析失败。再检查 Key 是否复制完整有没有把首尾空格带进去。如果 Key 是从环境变量读的打印一下确认不是undefined。第二类404 Not Found响应体可能是{error:Not Found}。九成是路径拼接问题。回顾一下target 是https://taotoken.net/api前端请求/api/v1/chat/completionspathRewrite把/api替换成空转发路径变成https://taotoken.net/api/v1/chat/completions正确。如果你把pathRewrite写成{^/api: /api}就会变成/api/api/v1/...404。如果你把 target 写成https://taotoken.net不带/api同时pathRewrite又去掉了/api就会变成https://taotoken.net/v1/...也 404。对照你的实际配置确保 target 和 pathRewrite 组合后路径唯一。第三类终端报[HPM] Error occurred while trying to proxy request ... (ECONNREFUSED)或proxy failed。这是 dev-server 连不上 target。先确认网络能访问https://taotoken.net用curl -I https://taotoken.net/api看是否返回。如果公司网络有出口限制需要走正常的网络配置不要用任何非正规手段。另外确认 target 协议是https不是http写错协议也会连接失败。第四类如果你在配置里看到OAuth相关字样比如某些工具要求先做 OAuth 授权再拿 token那属于另一套鉴权流程和本篇的 API Key 方式不同。TaoToken 的 API 调用用 Key 即可不需要 OAuth。如果你在别的工具里配过 OAuth注意不要把两套凭证混用否则会出现invalid_grant之类的报错。还有一个隐蔽的坑changeOrigin没开。表现是代理日志显示转发成功但目标返回 403 或 400提示 Host 不匹配。加上changeOrigin: true就好。这个字段在跨域代理里几乎是必开项建议默认写上。排查时善用logLevel: debug它会把转发前后的 URL 都打出来路径对不对一眼就能看出来。定位到问题后把 debug 关掉避免日志刷屏。6. 把代理配置沉淀为团队可复用的开发规范代理跑通只是第一步真正省时间的是把它变成团队里谁都能用的规范。几个实践建议。第一proxy.conf.json提交到仓库但 Key 不提交。Key 放在environment.local.ts这类被.gitignore排除的文件里或者用 Angular 的--configuration区分本地和 CI 环境。这样新同事拉下代码只要自己填一个 Key 就能跑不用重新研究代理怎么配。第二把pathRewrite的映射关系写成注释放在配置文件里或者维护一份简短的 README。因为路径拼接是 404 的高发区写清楚 target 和 rewrite 的组合结果能省下大量排查时间。第三如果你同时要代理多个后端比如 TaoToken 之外还有自己的业务接口可以在proxy.conf.json里加多个前缀{ /api: { target: https://taotoken.net/api, secure: true, changeOrigin: true, pathRewrite: { ^/api: } }, /biz: { target: http://localhost:8080, secure: false, changeOrigin: true, pathRewrite: { ^/biz: } } }这样前端用/api调模型用/biz调业务互不干扰。注意每个前缀的pathRewrite要各自对应别串了。第四长期做 AI 应用开发、需要频繁调模型和跑 Agent 的话可以了解 TaoToken 的 Coding Plan它面向持续编码场景做了额度优化比按次调用更划算。入口在https://taotoken.net/coding-plan。如果只是偶尔验证模型效果用模型对话页面就够了地址是https://taotoken.net/chat。接入文档在https://taotoken.net/doc遇到参数不确定时查这里最准。最后说一个我踩过的坑Angular 的ng serve默认端口是 4200如果你改了端口代理配置不用动因为代理是 dev-server 内部行为跟端口无关。但如果你用了--host 0.0.0.0让局域网其他设备访问那些设备请求的 origin 会变成你的局域网 IP此时浏览器视角仍然是同源因为它们访问的就是你的 IP:端口代理照样生效。这一点在手机真机联调时很有用。配置改完记得重启验证走一遍 curl 加浏览器 Network 面板确认无 CORS 红字、状态码 200就可以安心写业务代码了。