当前位置: 首页 > news >正文

vue的vue.config.js中反向代理pathRewite的理解

一,网络面板network中看到的请求地址是网络请求地址还是实际请求地址?


在浏览器的网络面板中,显示的请求地址是网络请求地址,而不是实际请求地址。网络请求地址是你在网络请求代码中指定的路径,即发送请求时使用的路径。例如,如果你使用 JavaScript 发送了一个 GET 请求,代码如下:

fetch('/api/users')

在浏览器的网络面板中,你将看到请求的 URL 是 /api/users,这就是网络请求地址。

实际请求地址是反向代理服务器将网络请求地址转发到目标服务器的路径。这个路径可能会被反向代理服务器配置所修改,因此实际请求地址与网络请求地址可能不完全相同。在网络面板中,你无法直接看到实际请求地址,除非在代理服务器的配置中明确将实际请求地址暴露给浏览器。

总之,在网络面板中,默认情况下,你看到的是网络请求地址,而不是实际请求地址。实际请求地址是由反向代理服务器处理和转发的,并不会在网络面板中直接显示。

二,反向代理中使用了pathRewirte后网络请求路径和实际请求路径和的关系


在使用反向代理的过程中,pathRewrite 配置项用于修改请求路径,实际请求路径和网络请求路径之间的关系如下:

网络请求路径:即你在网络请求代码中指定的请求路径。例如,你发送了一个网络请求 uni.$u.http.get('/api/users'),其中 /api/users 就是网络请求路径。

反向代理配置的目标路径:根据反向代理配置中的 target 属性和 pathRewrite 属性,反向代理服务器会将网络请求路径转发到目标服务器上的特定路径。例如,你的反向代理配置是将请求路径 /api/users 转发到目标服务器的 /users 路径。那么,这里的 /users 就是实际请求路径。

总结起来,实际请求路径是反向代理服务器转发到目标服务器的路径,而网络请求路径是你在代码中指定的请求路径。反向代理通过 pathRewrite 配置项来修改网络请求路径,将其转换为实际请求路径。

需要注意的是,实际请求路径可能与网络请求路径不同,这样可以隐藏目标服务器的真实路径,并且可以对请求路径进行转换或重写,以满足特定的需求,比如统一接口前缀、调整路径格式等。所以,在网络请求代码中,仍然需要根据实际情况使用网络请求路径而不是实际请求路径。

三,如果目标服务器是/users路径,是不是需要在pathRewrite中把/api设置为空?


如果目标服务器的路径是 /users,而你的网络请求路径是 /api/users,那么可以通过 pathRewrite 将 /api 设置为空来实现。具体的 pathRewrite 配置如下:

"pathRewrite": { "^/api": "" }

上述配置中,^/api 使用正则表达式匹配以 /api 开头的请求路径,并将其替换为空字符串,实际上就是去除了 /api 部分。

通过这样的配置,当你发送一个请求到 /api/users 时,反向代理服务器会将其转发到目标服务器的 /users 路径上,实现路径的重写。需要注意的是,反向代理中的 pathRewrite 配置是根据正则表达式进行匹配和替换的,因此可以根据实际情况进行灵活的配置。上述示例只是一个简单的示范,你可以根据自己的需求进行相应的调整和扩展。
                        
原文链接:https://blog.csdn.net/H_shaohui/article/details/133313939

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • html2canvas ios慎用和createImageBitmap ios慎用
  • 12、stm32通过dht11读取温湿度
  • TCP粘包和抓包
  • Node.js中的pipe方法:深入解析与应用指南
  • dubbo:dubbo服务负载均衡、集群容错、服务降级、服务直连配置详解(五)
  • 前端 介绍常见两种pc适配方案
  • 虚拟内存和linux(操作系统part1)
  • 【自动化】考试答题自动化完成答案,如何实现100%正确呢
  • Linux内核多线程
  • QGraphicsView类介绍
  • 推荐一款好用的mac解压缩软件
  • 编写bash脚本:读取URL,每隔5分钟运行一次‘git clone ‘ URL,直至运行成功。
  • 一步步理解 Python 异步生成器(AsyncGenerator)——从入门到实践
  • centos安装websocat
  • 【算法基础实验】图论-Dijkstra最短路径
  • JavaScript-如何实现克隆(clone)函数
  • [译] React v16.8: 含有Hooks的版本
  • Apache Spark Streaming 使用实例
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • ECMAScript入门(七)--Module语法
  • es6(二):字符串的扩展
  • github从入门到放弃(1)
  • If…else
  • Iterator 和 for...of 循环
  • React16时代,该用什么姿势写 React ?
  • Redis字符串类型内部编码剖析
  • vue自定义指令实现v-tap插件
  • 七牛云 DV OV EV SSL 证书上线,限时折扣低至 6.75 折!
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 如何选择开源的机器学习框架?
  • 深度学习中的信息论知识详解
  • 小而合理的前端理论:rscss和rsjs
  • 正则学习笔记
  • raise 与 raise ... from 的区别
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • #laravel 通过手动安装依赖PHPExcel#
  • $.ajax,axios,fetch三种ajax请求的区别
  • (7) cmake 编译C++程序(二)
  • (C)一些题4
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (Oracle)SQL优化技巧(一):分页查询
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (附源码)计算机毕业设计SSM疫情居家隔离服务系统
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (利用IDEA+Maven)定制属于自己的jar包
  • (十六)串口UART
  • (限时免费)震惊!流落人间的haproxy宝典被找到了!一切玄妙尽在此处!
  • (转) Face-Resources
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • (转)GCC在C语言中内嵌汇编 asm __volatile__
  • (转载)跟我一起学习VIM - The Life Changing Editor
  • . Flume面试题
  • . NET自动找可写目录
  • .NET C# 操作Neo4j图数据库
  • .net core 源码_ASP.NET Core之Identity源码学习