Angular 配置api代理 proxy 实践
话不多说,直奔主题
$方式一
-
第一步,在根目录或
/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-confignpm 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-confignpm run start ===OR=== ng serve
总结
相对来讲,两种方式都可实现,具体差别也不大,但若是需要配置多个面向 target 的代理地址,且同时需要多个匹配规则时,推荐使用 方式二 proxy.conf.js 的方式
衍生阅读
- 代理到后端服务器
相关文章:
Angular 配置api代理 proxy 实践
话不多说,直奔主题 $方式一 第一步,在根目录或/src 下新建一个 proxy.conf.json 文件 备注:这里不用纠结文件名称即xxx.xxx.json,只要使用时能找到,且正确配置文件内容格式即可 {"/dev-list": {"target…...
ES: 数据增,删,改,批量操作
1> 指定id 新增 _id 1 新增一条. 此命令重复执行,就是更新id1的数据 POST employee_zcy/_doc/1 {"uid" : "1234","phone":"12345678909","message" : "qq","msgcode" : "1","send…...
伯努利方程示例 Python 计算(汽水流体和喷泉工程)
伯努利原理 在流体的水平流动中,流体速度较高的点比流体速度较慢的点具有更小的压力。 不可压缩流体在到达狭窄的收缩部分时必须加速,以保持恒定的体积流量。 这就是为什么软管上的窄喷嘴会导致水流加速的原因。 但有些事情可能会困扰您这一现象。 如果…...
2022年中职网络安全竞赛——应用服务漏洞扫描与利用解析(详细)
应用服务漏洞扫描与利用 任务环境说明: 服务器场景:Server2115服务器场景操作系统:未知(关闭链接)使用命令nmap探测目标靶机的服务版本信息,将需要使用的参数作为FLAG进行提交;通过上述端口访问靶机系统并探测隐藏的页面,将找到的敏感文件、目录名作为FLAG(形式:[敏…...
yyds,Elasticsearch Template自动化管理新索引创建
文章目录一、什么是Elasticsearch Template?二、Elasticsearch Template的用法2.1、创建模板2.2、验证模板2.3、应用模板2.4、删除模板2.5、组合模板2.6、如何在同一个模板中定义多种匹配模式2.7、模板优先级2.8、提前模拟索引的最终映射三、Elasticsearch Template…...
蓝桥杯嵌入式ADC与DAC(都不需要中断)
目录 1.原理图 (1)ADC的原理图 (2)DAC的原理图 2.STM32CubeMX的配置 (1)ADC的配置 (2)DAC配置 3.代码部分 (1)ADC代码 (2)DA…...
网络视频的防盗与破解
网络视频(Web 视频)是指利用 HTML5 技术在浏览器中播放的视频,这类视频资源通常可以被随意下载,某些行业(比如教培行业)如果希望保护自己的视频资源不被下载,就需要对视频做防盗链处理。 防盗链需要着重加强两个方面的安全性:网络传输和客户端。 网络传输安全 网络传…...
FPGA 20个例程篇:20.USB2.0/RS232/LAN控制并行DAC输出任意频率正弦波、梯形波、三角波、方波(二)
通过上面的介绍相信大家对数字变频已经有了一个较为整体性的认识,下面笔者来对照XILINX的DDS IP核对数字变频技术展开更进一步的说明,做到了理论和实践很好地结合,这样大家再带入Modelsim进行仿真测试就不仅掌握了数字变频的理论知识…...
接口中新增方法,接口应用和适配器设计模式
目录 JDK8以后接口中新增方法 接口中默认方法注意事项: 新增方法static 接口中静态方法的注意事项: JDK9新增的方法 JDK8以后接口中新增方法 允许在接口中定义默认的方法,需要使用关键字default修饰作用:解决接口升级的问题 …...
自主HttpServer实现(C++实战项目)
文章目录项目介绍CGI技术概念原理设计框架日志文件TCPServer任务类初始化与启动HttpServerHTTP请求结构HTTP响应结构线程回调EndPoint类EndPoint主体框架读取HTTP请求处理HTTP请求CGI处理非CGI处理构建HTTP响应发送HTTP响应接入线程池简单测试项目扩展项目介绍 该项目是一个基…...
第26篇:Java数组API总结
目录 1、数组基本概念 2、Java如何声明数组 2.1中括号在数据类型之前 2.2 中括号在数据类型之后...
[C++] 信号
前言 信号与槽是QT的一个概念,原版C里并没有 使用 先声明一些类 Receiver负责接收信号,Emitter2则是负责发送 class Receiver : public ntl::Reflectible { public:void received(int num){std::cout << "received:" << num &…...
单片机——矩阵按键模块
主要目的 学会按键扫描 1.延时函数 延时函数部分详见链接: 单片机控制一盏灯的亮与灭程序解释 void delay (uint k) //定义延时函数{uint i,j;for(i<0;i<k;i){for(j0;j<113;j){;}}}这个程序里面的延时函数的目的是按键消抖。 2.按键扫描模块 这是本次实验的重点&a…...
Android学习之网络操作
网络操作 Android平台下的原生网络操作可以分为以下几步: 创建URL对象;通过URL对象获取HttpURLConnection对象;通过HttpURLConnection对象设置请求头键值对、网络连接超时时间等;通过HttpURLConnection对象的connect()方法建立网…...
Delphi XE开发android开发环境搭建
Delphi xe为使用Delphi作为开发工具的程序员,提供了开发APP的便捷工具,它的开发环境也是非常容易搭建,这里我简述一下Android的开发环境搭建,Delphi XE开发Android程序的开发环境需要三个软件支持:Java SE Development开发环境、Android SDK和Android Ndk开发环境。 1、安…...
flink入门-流处理
入门需要掌握:从入门demo理解、flink 系统架构(看几个关键组件)、安装、使用flink的命令跑jar包flink的webUI 界面的监控、常见错误、调优 一、入门demo:统计单词个数 0、单词txt 文本内容(words.txt): hello world …...
【数据结构】单链表中,如何实现 将链表中所有结点的链接方向“原地”逆转
一.实现一个单链表(无头单向不循环) 我们首先实现一个无头单向不循环单链表。 写出基本的增删查改功能,以及其它的一些功能(可忽略)。 #include<stdio.h> #include<assert.h> #include<stdlib.h>…...
摘花生(简单DP)
Hello Kitty想摘点花生送给她喜欢的米老鼠。她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来。地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生,经过一株花生苗就能摘走该它上面所有的花生。Hel…...
2022济南大学acm新生赛题解
通过答题情况的难度系数: 签到:A 简单:BL 中等:D 困难:CM 极难:KNO A-和 算出n个数的和判断正负性即可!!! 发现很多同学的代码错误:要么sum未赋初值&…...
策略模式教程
策略模式是一种行为型设计模式,它允许在运行时根据不同的情况选择不同的算法实现,从而使得算法可以独立于客户端而变化。本文将介绍策略模式的概念、应用场景、优点和缺点,并提供最佳的代码实践。本文的代码实现将使用Java语言,但…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
自然语言处理——文本分类
文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益(IG) 分类器设计贝叶斯理论:线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别, 有单标签多类别文本分类和多…...
