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

衍生阅读

  • 代理到后端服务器

相关内容

热门资讯

最近安卓系统奔溃,揭秘原因与应... 最近手机界可是炸开了锅呢!安卓系统竟然出现了大规模奔溃,这可真是让人摸不着头脑。咱们一起来探究这背后...
ce系统能刷安卓系统吗,揭秘能... 你有没有想过,你的安卓手机是不是也能用上CE系统呢?这可不是天方夜谭,今天就来给你揭秘一下这个神秘的...
安卓系统UI设计特色,创新与用... 你有没有发现,每次打开安卓手机,那界面设计得真是让人眼前一亮呢?今天,就让我带你一起探索一下安卓系统...
ipod有安卓系统吗,跨界融合... 你有没有想过,那个曾经风靡一时的iPod,它到底有没有安卓系统呢?这个问题,估计让不少音乐爱好者都好...
安卓多少系统最高的,揭秘最高版... 你有没有想过,你的安卓手机到底升级到了哪个系统版本呢?是不是好奇安卓系统里哪个版本才是最高级的呢?别...
现在安卓最高的系统,揭秘安卓1... 你有没有发现,手机更新换代的速度简直就像坐上了火箭呢!这不,最近安卓系统又来了一次大升级,听说这是现...
安卓系统怎么隐藏相册,安卓系统... 你是不是也有那么几本“私人珍藏”,不想让旁人随意翻看呢?比如,手机里的相册,里面藏着我们的喜怒哀乐,...
安卓桌面挂件系统下载,下载与个... 你有没有发现,手机桌面上的那些小玩意儿,简直就是生活的调味品?今天,咱们就来聊聊安卓桌面挂件系统下载...
wp手机加安卓系统,探索跨界新... 你有没有想过,为什么你的手机总是那么卡,而别人的手机却流畅得像风一样?是不是觉得自己的手机有点OUT...
省电手机推荐安卓系统,安卓系统... 手机这玩意儿,对于我们这些手机控来说,简直就是生活的必需品。但是,你知道吗?现在市面上那么多手机,要...
安卓系统衰落怎么恢复,探寻衰落... 你有没有发现,最近安卓系统好像有点儿“水土不服”了呢?曾经的霸主地位,如今似乎有些动摇。不过别急,今...
安卓系统手机应用锁,安全无忧的... 你有没有发现,现在手机里的秘密越来越多,是不是也跟小秘密一样,想要找个地方藏起来呢?没错,今天就要来...
安卓系统书院源app,安卓系统... 你有没有发现,手机里的安卓系统越来越智能了?今天,我要给你介绍一个特别有意思的书院源app,它可是安...
安卓系统8.1平板推荐,安卓8... 你有没有想过,拥有一款性能卓越、体验流畅的安卓系统8.1平板,简直就是移动办公和娱乐的完美搭档?没错...
谷歌不给华为安卓系统,探索替代... 你知道吗?最近科技圈可是炸开了锅!谷歌突然宣布,不给华为提供安卓系统了!这可不仅仅是两家公司之间的小...
选择安卓系统原因调查,揭秘安卓... 你有没有想过,为什么那么多人会选择安卓系统呢?是不是好奇他们到底看中了安卓的哪些“小秘密”?今天,就...
安卓系统的安全证书,守护移动安... 你知道吗?在咱们这个科技飞速发展的时代,手机已经成了我们生活中不可或缺的好伙伴。而说起手机,安卓系统...
谷歌安卓系统挣钱吗,如何通过它... 你有没有想过,那个无处不在的谷歌安卓系统,它到底是怎么赚钱的呢?没错,就是那个让我们的手机、平板、智...
GALGAME安卓换苹果系统,... 你有没有想过,那些在安卓手机上玩得如痴如醉的GALGAME,竟然也能在苹果系统上大放异彩?没错,就是...
华为宣布摆脱安卓系统,迈向自主... 哇,你知道吗?最近华为可是闹出了一个大新闻!那就是他们宣布要摆脱安卓系统,自己研发一套全新的操作系统...