angular-cli中配置代理

Posted 2023-03-26

参考技术A 前端开发中经常会遇到跨域的问题，特别是在开发环境，本地开发请求后台接口，因为前端服务和后台服务不是同一台电脑所以会出现跨域的现象，也就是遵循我们的同源策略，即协议，域名，端口不一致时就会出现跨域的现象， 此时在我们本地调试程序久需要惊醒代理配置，我用的angular框架做开发，所以本文围绕angular
如下图，我是用express配置了一个接口

然后在不做任何操作的情况下请求这个/auth的这个接口，接口的全称应该是192.168.1.109:8888/auth
结果会报错，如下图

在项目的根目录新建JSON文件

配置好了后，npm start启动项目，请求成功

如果想代理多个路径，可以换一种方式配置，加了个context参数

此配置可以代理接口地址为“/auth”和“/api”开头路径的服务，以上方法是用json文件配置代理的，还可以用ES6模块化的方式配置

同样在项目的根目录新建一个proxy.config,js文件，此文件是js文件
和json文件同样配置,此时不在赘述

这里插一句，如果要请求不跨域还可以修改接口的请求头，例如我express写的接口，所以我会在请求前做相应的参数设置

如果要需要进行其他参数的配置可以参照 webpack 官方文档