Angular 开发服务器如何用 proxy.conf.json 把 /api 请求代理到后端服务【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular如果你的 Angular 应用由ng serve开发服务器在本地运行而后端 API 跑在另一个服务上例如http://localhost:3000前端直接请求后端端口通常会遇到跨域问题。Angular CLI 的ng serve命令支持代理配置通过--proxy-config选项传入一个proxy.conf.json文件让开发服务器把匹配的 URL 转发到后端应用代码里的请求地址可以保持不变。本文的示例目标是把所有http://localhost:4200/api的请求转发到运行在http://localhost:3000/api的后端服务。配置方法来自官方文档 serve 命令说明CLI 选项定义见 serve 命令参考。前置条件项目是一个 Angular CLI 工作区angular.json中存在serve目标。ng serve执行的就是默认项目的serve目标最常用的 builder 是angular/build:dev-server。你可以打开angular.json找到项目对应的serve目标确认builder字段的值{ projects: { my-app: { architect: { // ng serve invokes the Architect target named serve. serve: { builder: angular/build:dev-server // ... } } } } }后端服务已在本地启动本文示例中是http://localhost:3000。开发服务器默认监听端口为 4200--port选项的默认值如果后端端口不同下文配置中的target按实际地址调整。第一步创建 proxy.conf.json在项目根目录的src/文件夹下新建proxy.conf.json写入以下内容{ /api/**: { target: http://localhost:3000, secure: false } }键/api/**是路径匹配模式target是转发目标的后端地址secure: false是官方示例中的原样配置。匹配模式的含义因 builder 而异具体规则见下文“路径匹配规则因 builder 而异”。第二步在 angular.json 中关联代理文件在angular.json的serve目标里添加proxyConfig选项指向刚创建的文件{ projects: { my-app: { architect: { serve: { builder: angular/build:dev-server, options: { proxyConfig: src/proxy.conf.json } } } } } }如果不想改angular.json也可以在启动时通过--proxy-config命令行选项直接指定代理文件两者是同一个配置入口。第三步启动开发服务器在项目根目录运行ng serveng serve会编译应用、启动开发服务器并在文件变化时自动重新构建和热更新按CtrlC可停止服务器。结果验证文档对成功状态的描述是所有发往http://localhost:4200/api的调用都会被转发到运行在http://localhost:3000/api的服务上。也就是说浏览器或页面里请求开发服务器的/api路径时实际响应来自后端服务本身而不是开发服务器。你可以在后端服务的日志中确认收到了对应请求来核对转发是否生效。两个必须知道的限制修改代理配置后必须重启 ng serve文档明确说明对proxy.conf.json的任何修改都必须重启ng serve进程才会生效热更新不会自动应用代理文件的变更。路径匹配规则因 builder 而异/api/**这类模式在不同 builder 下的匹配范围不同选择键名时要看自己的serve目标用的是哪个 builderangular/build:dev-server基于 Vite/api只匹配/api本身。/api/*匹配/api/users但不匹配/api/users/123。/api/**匹配/api/users和/api/users/123。angular-devkit/build-angular:dev-server基于 Webpack DevServer/api匹配/api及其所有子路径等价于 Vite 下的/api/**。所以在默认的angular/build:dev-server下想覆盖/api下所有层级的子路径模式要写成/api/**如果你的工作区仍在使用 Webpack 的angular-devkit/build-angular:dev-server写/api就够了。写错模式时请求不会报 404 之外的额外提示转发只是静默不生效排查时优先对照上表检查模式写法。参考ng serve 命令文档含 “Proxying to a backend server” 章节ng serve CLI 选项参考--proxy-config定义【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考