Angular PRoxy 配置

• 官网文档 https://angular.io/guide/build#using-corporate-proxy

【相关教程推荐：《angular教程》】

为何做？

写一个代理文件，将匹配的请求代理到其他地址，解决本地开发跨域问题。

如何配置？

• 在根目录中创建一个proxy.config.js
• 可以在这个文件中做如下配置
• 在 package.json的运行项目命令中加入 --proxy-config proxy.config.js

配置介绍

const PROXY_CONFIG = [  {
    context: ['/api'],    target: 'http://xxx',    secure: false,    changeOrigin: true,    pathrewrITe: {
      '^/api': '',    }
,  }
    ,];
    module.exports = PROXY_CONFIG;
    

• context: 需要匹配的path
• target: 代理到的地址
• pathRewrite: 将请求的部分path重写，它是一个对象，键是^+要重写的path， 值是替换的path。
• secure: 安全设置
• changeOrigin: 改变源

配置实例

如http://localhost:4208/auth/LOGin

想要代理到

http://www.baidu.COM/news/login

可以这样配置

const PROXY_CONFIG = [  {
    context: ['/auth/login'],    target: 'http://www.baidu.com',    pathRewrite: {
        '^/auth/login': '/news/login',    }
,  }
    ,  ]module.exports = PROXY_CONFIG;
    

Q： 如果有两个接口，一个/api/cer/register,另外一个/api/cer/login,我该如何将两个接口代理到不同的地址？

{
    context: ['/api/cer/login'],    target: 'xxx1',    secure: false,    changeOrigin: true,}
,{
    context: ['/api'],    target: 'xxx2',    secure: false,}
    ,

使用/api，只要是匹配到这个的都会走它的代理，不过如果在它前面加了个更加精确的/api/cer/login,会优先匹配到它，走这个代理。

更多用法更新于 github：

https://github.com/deepthan/blog-angular

更多编程相关知识，请访问：编程入门！！

以上就是浅析如何基于脚手架配置 Angular 代理（proxy）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！