在Vue中配置代理服务器的方法详解
大家既然能看到这个视频，说明大家对跨域已经有了一定的理解，所以这里就不花功夫对跨域进行详细的介绍了
1. 首先扩展一点，axios在本地发送的请求如果你不把路径写全，它都是会默认加上自己项目所在的端口，就比如说
axios.get('/student')
axios.get('/teacher')点击发送按钮后，以上两行代码实际为
http://localhost:8081/student http://localhost:8081/teacher
其中localhost：8081为自己项目所在的地址。
2.代理服务器是如何解决跨域的？
由此我们可以借助axios发送请求时，会默认发送给本地的特性来解决跨域问题
3.如何在vue中配置代理服务器，代码十分简单。
devServer: { //开启代理服务器 (方式1) 配置多个代理
proxy: {
'/api': { //'/api'是自行设置的请求前缀
target: 'http://localhost:5000',
pathRewrite:{'^/api':''}, //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
ws: true,//用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
}上述代码中，我配置一个匹配所有前缀为/api的请求，也就是所有以/api为头的请求都会走我上面配置的代理，向http://localhost:5000这个服务器发送请求。但是最前面我写的两个接口为‘/student’和‘/teacher’，他们并不会走代理。
4. 如何解决呢？
我们可以利用axios的二次封装，给所有的请求都添加上/api这个前缀（这个前缀是可以随意命名的）
const requests = axios.create({
//配置对象
//基础路径，在发送请求时，路径当中会出现api
baseURL:'/api',
//代表请求超时的时间
timeout:5000
});此时我们点击按钮发送的请求为
http://localhost:8081/api/student http://localhost:8081/api/teacher
通过代理服务器的target属性加工之后我们原先的请求就变为了
http://localhost:5000/api/student http://localhost:5000/api/teacher
也就是把/api前的路径换成了目标服务器的地址。因为/api这个前缀是我们自己添加的，所以需要用到pathRewrite 来将/api重写为‘’（空）
http://localhost:5000/student http://localhost:5000/teacher
这时，我们就可以正常获取数据了。
注意：如果在开发中，我们拿到的所有请求有共同的前缀，那么我们可以省略给所有接口统一加上/api这一步操作。
当然还有更加简洁的做法，让所有的请求都走代理，而并不去匹配请求的前缀。
devServer:{
proxy:'http://localhost:5000' //开启代理服务器 (方式2) 5000端口指的是要向5000端口发送请求
},但是这样会有缺陷，如果你请求的资源本地就有，他会直接返回本地的数据，而不会向服务器发送请求，所以建议大家还是用方式1，虽然麻烦，但是可以配置多个代理，也不会出现资源直接从本地返回的情况。
总结
到此这篇关于在Vue中配置代理服务器的文章就介绍到这了,更多相关Vue配置代理服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue路由守卫和keep-alive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
本文主要介绍了Vue保持用户登录状态(各种token存储方式)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue中关于_ob_:observer的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue.js之slot深度复制的相关资料，文中介绍的很详细，对大家具有一定的参考价值，需要的朋友们来一起看看吧。2017-03-03
对于一个中后台类的项目,一个比较常见的展示形式就是Table了,这篇文章主要给大家介绍了关于Vue封装通用table组件的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
Vue OptionsAPI与CompositionAPI的区别与使用介绍
OptionsAPI和CompositionAPI是Vue.js框架中两种不同的组件编写方式,OptionsAPI通过对象字面量定义组件,以属性分隔不同功能,响应式数据通过data属性定义,本文给大家介绍Vue OptionsAPI与CompositionAPI的区别,感兴趣的朋友一起看看吧2024-10-10
这篇文章主要介绍了使用vue中的混入mixin优化表单验证插件,本文是小编给大家总结的一些表单插件的问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-07-07
vue3结合typescript中使用class封装axios
这篇文章主要为大家介绍了vue3结合typescript中使用class封装axios实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论