目录proxy 配置确认、解析原因 一原因二注意详解pathRewritechangeOrigin总结proxy 配置确认、解析 devServer: { https: tr
devServer: {
https: true, // 开启Https模式
// 配置服务器代理
proxy: {
'/api': { // 匹配访问路径中含有 '/api' 的路径
target: 'http://localhost:3000/', // 测试地址、目标地址
changeOrigin: true,
ws: true, // 是否开启 websocket 代理
pathRewrite: { // 请求路径重写
'^/api': '', //重写请求路径
},
}
}
},
百度最多的解释
这个原因得注意一下
比如说我之前的全局 http.js 配置文件是这样写的
const http = axiOS.create({
baseURL: 'http://localhost:3000/',
})
所以不论是 生产 还是 开发 环境下,我的请求都会发送给我们配置的baseURL,而不会走我们的代理!!!。
所以我们得修改一下配置,使我们的生产路径在生产环境下才生效
let baseURL = "/";
if (process.env.node_ENV === 'production') {
baseURL = 'http://localhost:3000/';
}
const http = axios.create({
baseURL,
})
这样在开发环境下,我们的 baseURL = "/"
, 代理就可以生效了。
请求路径必须带有标识!!!
proxy: {
'/api': {
...
}
}
/api
,使用 pathRewrite
解决pathRewrite: { // 请求路径重写
'^/api': '', //重写请求路径
},
pathRewrite的key值 ^/api
就是一个正则表达式。
pathRewrite的value值
为替换后的路径。
这里的话就是将匹配成功的地址当做一个字符串,然后执行 js 的 replace
方法,将执行成功的最终结果作为最后的请求路径。
而 axios.get("/ee/ff/dd")
这个请求就不会进行代理,因为匹配不上我们预设的规则 (请求路径没有 /api
)
最终的请求路径变成了 http://localhost:3000/ee/ff/dd
, 和原路径一致;
又比如说我们的配置为
pathRewrite: { // 请求路径重写
'^/api': '/rewrite', //重写请求路径
}
假设,如果你的前端服务器是 http://localhost:3000,后端是 http://localhost:8082。
那么后端通过 request.getHeader(“Host”) 获取依旧是 http://localhost:3000。
如果你设置了 changeOrigin: true,那么后端通过 request.getHeader(“Host”) 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。
到此这篇关于Vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决的文章就介绍到这了,更多相关vue.config.js中devServer.proxy配置说明内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决
本文链接: https://www.lsjlt.com/news/195805.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0