vue-cli中devServer.proxy相关配置项的使用
更新时间：2022年04月09日 11:01:26 作者：萧仁武
这篇文章主要介绍了vue-cli中devServer.proxy相关配置项的使用详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
devServer.proxy相关配置项的说明
如图：
devServer.proxy中的 changeOrigin 参数
changeOrigin 为false时，请求头中host仍然是浏览器发送过来的host;如果设置成true：发送请求头中host会设置成target的值。
devServer.proxy中的 pathRewrite 参数
本示例中，pathRewrite设置了 '^/lr': '' ，作用如下:
使用代理，首先需要有一个标识，告诉程序这个连接要使用代理，不然的话，可能你的html、css、js、矢量图等静态资源都跑去代理。所以我们要通过一个唯一标识，让接口使用代理，静态资源文件使用本地。
proxy中的 '/lr':{······}，就是告诉node，我的接口是要以 /lr 开头的才使用代理。所有的接口都要写成 /lr/xx/xx ，以 /lr 开头，最后代理的接口路径路径就是 http://localhost:8080/lirong/lr/xx/xx
但是例子中真实的后台数据接口里没有 /lr，直接就是 http://localhost:8080/lirong/xx/xx ，所以就需要配置 pathRewrite，用'^/lr': '' 将 /lr 去掉，这样既有正确的标识，又能在真实请求接口的时候去掉 /lr 。
devServer.proxy代理配置详解
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。
.config.js文件中引入依赖项
const proxy = require('http-proxy-middleware');devServer.proxy 可以是一个指向开发环境 API 服务器的字符串
//服务器会将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000上
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}更多的代理控制行为
const proxy = require('http-proxy-middleware');
module.exports = {
devServer:{
host: 'localhost',//target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}
},
//...
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要为大家详细介绍了Vue3中使用富文本编辑器的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下2023-10-10
本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue中的封装常用工具类，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue3中的reactive函数声明数组方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了vue 动态表单开发方法,结合具体案例形式详细分析了vue.js动态表单相关原理、开发步骤与实现技巧,需要的朋友可以参考下2019-12-12
在Vue中有多种方式可以进行路由跳转并传递参数,这篇文章主要给大家介绍了关于vue路由三种传参方式的相关资料,文中介绍的方法分别包括params传参、query传参(显示传参)以及props传参(路由组件传参),,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了Vue的diff算法原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了Vue2.0实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论