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,会优先匹配到它，走这个代理。