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 的方式

衍生阅读

  • 代理到后端服务器

相关内容

热门资讯

安卓9.0系统挂机游戏,轻松享... 你有没有发现,自从安卓9.0系统更新后,手机里的游戏体验简直就像坐上了火箭!今天,就让我带你一起探索...
安卓系统怎么用迅雷下载,安卓系... 你有没有想过,在安卓系统上下载文件竟然也能这么简单?没错,今天就要来给你揭秘,如何用迅雷在安卓系统上...
安卓手机刷成学生系统,探索全新... 你有没有想过,你的安卓手机其实可以变身成一个充满学习氛围的学生系统呢?没错,就是那种看起来简洁、功能...
ios能迁移安卓系统吗,iOS... 你有没有想过,你的iPhone里的那些宝贝应用,能不能搬到安卓手机上继续使用呢?这可是不少手机用户的...
荣耀10安卓11系统,畅享极致... 你知道吗?最近手机界可是热闹非凡呢!荣耀10这款手机,自从升级到了安卓11系统,简直就像脱胎换骨了一...
安卓系统pc版电脑配置,打造流... 你有没有想过,安卓系统竟然也能在电脑上运行呢?没错,就是那个我们手机上常用的安卓系统,现在也能在PC...
tcllinux系统刷安卓系统... 你有没有想过,你的TCL Linux系统竟然也能升级成安卓系统呢?没错,就是那个我们日常使用的安卓系...
安卓13系统更新蓝牙,蓝牙功能... 你有没有发现,最近你的安卓手机好像变得不一样了?没错,就是那个神秘的安卓13系统更新,它悄悄地来到了...
安卓系统钉钉打开声音,安卓系统... 你有没有遇到过这种情况?手机里装了钉钉,可每次打开它,那声音就“嗖”地一下跳出来,吓你一跳。别急,今...
理想汽车操作系统安卓,基于安卓... 你有没有想过,一辆汽车,除了能带你去你想去的地方,还能像智能手机一样,给你带来智能化的体验呢?没错,...
安卓系统越狱还能升级吗,升级之... 你有没有想过,你的安卓手机越狱后,还能不能愉快地升级系统呢?这可是不少手机爱好者关心的大问题。今天,...
安卓系统蓝牙耳机拼多多,畅享无... 你有没有发现,最近蓝牙耳机在市场上可是火得一塌糊涂呢!尤其是安卓系统的用户,对于蓝牙耳机的要求那可是...
安卓变苹果系统桌面,桌面系统变... 你知道吗?最近有个大新闻在科技圈里炸开了锅,那就是安卓用户纷纷转向苹果系统桌面。这可不是闹着玩的,这...
鸿蒙系统怎么下安卓,鸿蒙系统下... 你有没有想过,你的手机里那个神秘的鸿蒙系统,竟然也能和安卓世界来一场亲密接触呢?没错,今天就要来揭秘...
手机安卓系统流程排行,便捷操作... 你有没有发现,现在手机的世界里,安卓系统就像是个大舞台,各种版本层出不穷,让人眼花缭乱。今天,就让我...
安卓系统左上角hd,左上角HD... 你有没有发现,每次打开安卓手机,左上角那个小小的HD标识总是默默地在那里,仿佛在诉说着什么?今天,就...
安卓系统软件文件,架构解析与功... 你有没有发现,手机里的安卓系统软件文件就像是一个神秘的宝库,里面藏着无数的宝藏?今天,就让我带你一起...
安卓系统输入法回车,探索安卓输... 你有没有发现,在使用安卓手机的时候,输入法回车键的奇妙之处?它就像是我们指尖的魔法师,轻轻一点,文字...
安卓修改系统时间的软件,轻松掌... 你有没有想过,有时候手机上的时间不对劲,是不是觉得生活节奏都被打乱了?别急,今天就来给你揭秘那些神奇...
安卓系统能改成鸿蒙吗,系统迁移... 你有没有想过,你的安卓手机能不能变成一个鸿蒙系统的“小清新”呢?这可不是天方夜谭哦,今天就来聊聊这个...