当使用前后端分离,后端主导的开发方式进行前后端协作开发时,常常有如下情景:
- 后端开发完毕在服务器上进行部署并给前端API文档
- 前端在本地进行开发并向远程服务器上部署的后端发送请求
在这种开发过程中,如果前端想要一边开发一边测试接口,就需要使用跨域的方式。
1 反向代理
反向代理(Reverse Proxy)方式是指以代理服务器来接受网络上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给网络上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。
2 设置方法
首先需要建立一个JSON文件,文件名为proxy.config.json:
1 2 3 4 5 |
{ "/":{ "target":"http://localhost:8080/" } } |
http://localhost:8080/为服务器的IP地址,或者是所需要请求的接口域名,该地址就是需要被代理的
/是代理的名称,一般都是接口请求的IP地址后面的第一个参数名。比如http://localhost:8080/api/…,则代理名称就是/api
因为http://localhost:8080/已经被代理到/上,所以反向代理后写接口请求的时候只需要写:
1 2 3 4 |
this.$http.post(`/user/login`,data) .then(res=>{ Console.log(res); }) |
3 启动代理服务
第一种:启动项目通过npm start启动,会自动启动代理服务
1 |
npm start |
第二种:直接以如下命令启动代理服务
1 |
ng serve --proxy-config proxy.conf.json |