当前位置: 首页> 教育> 就业 > vue的vue.config.js中反向代理pathRewite的理解

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

时间:2025/7/11 15:20:44来源:https://blog.csdn.net/weixin_53035812/article/details/141599418 浏览次数:0次

一,网络面板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

关键字:vue的vue.config.js中反向代理pathRewite的理解

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: