一、为什么要配置proxy代理?
前后端分离逐渐成为主流的开发方式,但同时也带来一些问题。在本地开发时,http请求通常需要从前端端口号转到后端端口号。处理跨域问题的方法有很多,如 CROS、 修改浏览器配置等,我比较喜欢proxy代理的方式。
二、Angular配置proxy代理
-
在Angular项目的根目录下创建proxy.conf.json文件。
- 在proxy.conf.json文件中进行配置。
{
"/service/*": { // 匹配以/service/开头的url路径
"target": "http://localhost:8080", // 跨域时的目标地址
"pathRewrite": { // 路径重写,可选,在请求中去掉/service
"^/service": ""
},
"secure": false
}
}
假如Angular的请求为http://localhost:4200/service/login,经过proxy处理后,该请求变为http://localhost:8080/login,实现了自动跨域。
proxy配置项很多,可以参考https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
-
在package.json中配置代理模式,使用npm start指令启动Angular项目。
网友评论