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语言,但…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
算法—栈系列
一:删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...
