美文网首页
Angular配置proxy代理

Angular配置proxy代理

作者: 不要杀死你的鹅 | 来源:发表于2020-03-03 16:47 被阅读0次

一、为什么要配置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

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


相关文章

网友评论

      本文标题:Angular配置proxy代理

      本文链接:https://www.haomeiwen.com/subject/qumhlhtx.html