Angular配置proxy代理

一、为什么要配置proxy代理？

前后端分离逐渐成为主流的开发方式，但同时也带来一些问题。在本地开发时，http请求通常需要从前端端口号转到后端端口号。处理跨域问题的方法有很多，如 CROS、 修改浏览器配置等，我比较喜欢proxy代理的方式。

二、Angular配置proxy代理

1. 在Angular项目的根目录下创建proxy.conf.json文件。

   
   
2. 在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

3. 在package.json中配置代理模式，使用npm start指令启动Angular项目。