我是靠谱客的博主 勤奋火车,这篇文章主要介绍浅析如何基于脚手架配置 Angular 代理(proxy),现在分享给大家,希望可以做个参考。

本篇文章给大家介绍一下如何基于脚手架配置 Angular 代理(proxy),希望对大家有所帮助!

Angular proxy 配置

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

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

为何做?

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

如何配置?

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

配置介绍

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
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

可以这样配置

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
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,我该如何将两个接口代理到不同的地址?

复制代码
1
2
3
4
5
6
7
8
9
10
11
{ context: ['/api/cer/login'], target: 'xxx1', secure: false, changeOrigin: true, }, { context: ['/api'], target: 'xxx2', secure: false, },
登录后复制

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

最后

以上就是勤奋火车最近收集整理的关于浅析如何基于脚手架配置 Angular 代理(proxy)的全部内容,更多相关浅析如何基于脚手架配置内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(118)

评论列表共有 0 条评论

立即
投稿
返回
顶部