vue中axios配置代理的俩种方式及优缺点
2024-08-25 07:47:55
概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官方的CORS,还有一种就是利用<script>中的src(就是jsonp),
在vue中则可以使用代理服务器来解决跨域的问题。
接下来有俩种方法的展示和介绍:
在vue.config.js里面进行配置
一:
devServer: {
proxy:'http://localhost:5000' //代理服务器的目标的基础路径
}
二:
devServer: {
proxy: {
'/first': {
target: 'http://localhost:5000', //代理目标的基础路径
pathRewrite: { '^/first': '' }, //重写路径,将代理服务器发送给服务器的请求路径进行更改,这样就可以让服务器收到的请求正常
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
}
}
但是这种需要在配置axios的路径的时候,在后方加入设置好的前缀
例:
methods: {
add(){
axios.get('http://localhost:8080/first/students').then(
response=>{console.log("请求成功了",response.data)},
error =>{console.log("请求失败了",error.message)}
)
}
},
区别于优缺点:
第一种优点:配置相对简单
缺点:只能配置一个代理,就是当后台服务器超过一台的时候,便不再适用,而且当你前端资源(public)上面如果有名字相同的文件,vue会自动将本地的资源视为优先,则会导致你请求后台的数据变成你自己曾经写的公共数据,获取不到后台的数据,则不能灵活的控制是否进行代理。
第二种优点:可以配置多个代理,而且还可以灵活的控制是否进行代理,也通过这样控制是否进行代理,加入了就进行代理,优先后台的资源,不加则只会获取前端资源,前端资源里面没有则报错
缺点:配置相对复杂一点点,而且需要加前缀
最新文章
- web 安全的前期准备哦
- android内存优化
- 软件测试面试(2)LR篇
- ios -几种常见定时器
- csuoj 1352: New Sorting Algorithm
- 用来理解 Java 编程语言的 8 个图表
- Hadoop参数优化
- php 数组 array_values () array_key()
- node.js NPM 使用
- CoreJavaE10V1P3.9 第3章 Java的基本编程结构-3.9 大数值(Big Numbers)
- 使用U盘安装ubuntu 12.04(使用大白菜u盘启动工具)
- Python 多线程库总结
- 吓尿了,mac下bash出了问题
- flask-信号
- Guitar Por如何演奏刮弦
- WEEK1
- python第十二天 生成器,迭代器,内置函数
- 【python学习-3】python数据类型
- Sublime Text 2搭建Go开发环境,代码提示+补全+调试
- Gson全解析(下)-Gson性能分析