Angular 配置api代理 proxy 实践
创始人
2024-06-01 17:51:09
0

话不多说,直奔主题

$方式一

  • 第一步,在根目录或/src 下新建一个 proxy.conf.json 文件

    备注:这里不用纠结文件名称即xxx.xxx.json,只要使用时能找到,且正确配置文件内容格式即可

    {"/dev-list": {"target": "https://a.examples.com/dev",	// 代理地址"secure": true,	// 接口是否开启 https"changeOrigin": true	// 支持跨域},"/dev-info": {"target": "https://a.examples.com/dev","secure": true,"changeOrigin": true},"/test-list": {"target": "http://b.examples.com/test","secure": false,"changeOrigin": true,"logLevel": "debug"	// 代理日志},"/test-info": {"target": "http://b.examples.com/test","secure": false,"changeOrigin": true,"logLevel": "debug"}
    }
    
  • 第二步,在 angular.json 文件中找到 architect 下的 serve ,并在 serve 内的 options 选项内配置 proxyConfig,没有就依次创建对应选项参数,事例如下:

    ...
    {"architect": {..."serve": {..."options": {...// 当前配置文件所做目录,相对于`angular.json`文件的位置,具体以实际配置位置为准"proxyConfig": "src/proxy.conf.json"	}}}
    }
    ...
    
  • 第三步,重启项目,验证成果

    说明:这里的 npm run start 实际指向的也是 ng serve 启动方式,故不用配置 --proxy-config

    npm run start 
    ===OR===
    ng serve
    

$方式二

  • 第一步,在根目录或/src 下新建一个 proxy.conf.js 文件

    备注:这里不用纠结文件名称即xxx.xxx.js,只要使用时能找到,且正确配置文件内容格式即可

    const PROXY_CONFIG = [{context: ["/dev-list","/dev-info"],"target": "https://a.examples.com/dev","secure": true,"changeOrigin": true},{context: ["/test-list","/test-info"],"target": "http://b.examples.com/test","secure": false,"changeOrigin": true,"logLevel": "debug"}
    ]module.exports = PROXY_CONFIG
    
  • 第二步,在 angular.json 文件中找到 architect 下的 serve ,并在 serve 内的 options 选项内配置 proxyConfig,没有就依次创建对应选项参数,事例如下:

    ...
    {"architect": {..."serve": {..."options": {...// 当前配置文件所做目录,相对于`angular.json`文件的位置,具体以实际配置位置为准"proxyConfig": "src/proxy.conf.js"	}}}
    }
    ...
    
  • 第三步,重启项目,验证成果

    说明:这里的 npm run start 实际指向的也是 ng serve 启动方式,故不用配置 --proxy-config

    npm run start 
    ===OR===
    ng serve
    

总结

相对来讲,两种方式都可实现,具体差别也不大,但若是需要配置多个面向 target 的代理地址,且同时需要多个匹配规则时,推荐使用 方式二 proxy.conf.js 的方式

衍生阅读

  • 代理到后端服务器

相关内容

热门资讯

如何删除安卓系统信息,安卓系统... 手机里的信息越来越多,是不是感觉自己的隐私都快要被暴露无遗了?别担心,今天就来教你怎么轻松删除安卓系...
国产安卓系统哪个流畅,揭秘哪家... 你有没有想过,手机里的操作系统就像是我们的大脑,有时候它运行得快慢,直接影响我们的使用体验呢?今天,...
安卓怎么刷主机系统,掌握主机系... 你有没有想过,你的安卓手机或者平板,是不是也能像电脑一样,装上各种酷炫的系统呢?没错,今天就要来给你...
安卓系统桌面显示时间,见证日常... 你有没有发现,每次打开安卓手机,那桌面上的时间总是一闪一闪的,仿佛在告诉你:“时间不等人哦!”今天,...
os云刷安卓系统,畅享智能新体... 你有没有想过,你的安卓手机是不是也能像电脑一样,装上各种酷炫的系统呢?没错,今天就要来跟你聊聊这个神...
安卓系统如何装siri,安卓设... 你有没有想过,在安卓手机上也能享受到Siri的智能语音助手服务呢?没错,就是那个在iPhone上呼之...
电脑怎么安卓双系统,电脑安装安... 你有没有想过,一台电脑同时运行安卓和Windows系统,那得多酷啊!想象一边处理工作,一边刷刷抖音,...
linux操作系统与安卓系统,... 你有没有想过,为什么你的手机可以随时随地给你发送信息,而你的电脑却能帮你处理复杂的任务呢?这背后,就...
安卓大屏系统信息,功能与体验全... 你有没有发现,最近手机界的大屏风潮真是势不可挡啊!安卓大屏系统信息,这可是个热门话题呢!想象拿着一块...
苹果7转安卓系统,探索安卓系统... 你有没有想过,从苹果7转到安卓系统会是怎样的体验呢?想象你手中的那个曾经陪伴你度过无数美好时光的苹果...
安卓系统打卡手机推荐,高效便捷... 你有没有想过,每天早上起床后,第一件事就是拿出手机打卡签到?这已经成为现代生活中不可或缺的一部分了。...
安卓手机装了小米系统,小米系统... 你有没有想过,把安卓手机的灵魂换成小米的系统,会是怎样的体验呢?想象原本流畅的安卓系统,突然间被注入...
安卓汽车系统怎么升级,轻松实现... 亲爱的安卓车主们,你是否也像我一样,对汽车系统升级充满了好奇和期待呢?想象你的爱车就像一部智能手机,...
手机怎么变安卓系统,轻松实现系... 你有没有想过,你的手机居然可以变身成为安卓系统呢?没错,就是那个自由度极高的操作系统!今天,就让我来...
安卓仿ios系统横条,打造流畅... 你有没有发现,最近安卓手机上出现了一种特别的新花样——仿iOS系统的横条设计!这可不是简单的模仿,而...
谷歌汽车安卓系统下载,引领智能... 你有没有想过,未来的汽车可能会变成一个移动的智能中心?想象你的汽车不仅能够带你穿梭在城市的大街小巷,...
安卓系统硬件修复软件,全面解析... 手机里的安卓系统突然卡顿,是不是让你头疼不已?别急,今天就来给你揭秘那些神奇的安卓系统硬件修复软件,...
鸿蒙系统比安卓系统大么,体积对... 你有没有想过,手机里的操作系统,就像是手机的心脏,它的大小、性能,都直接影响到手机的使用体验。今天,...
安卓系统 刷机模式,刷机模式操... 你有没有想过,你的安卓手机其实就像一个隐藏着无限可能的宝藏呢?没错,今天就要来跟你聊聊这个宝藏的秘密...
案卷制作系统下载安卓,高效便捷... 你有没有想过,在手机上也能轻松制作案卷呢?没错,现在就有这么一款神器——案卷制作系统,而且它还支持安...