vue axios解决跨域问题
什么是跨域问题?简单的说就是浏览器(前端人员)跟服务器不同端,浏览器为了安全不允许再不同网络下的数据通信,不能传输数据的问题怎么解决跨域问题呢,就是设立一个代理服务器8080,跟浏览器8080同一个域,然后将服务器5000发过来的数据先发送给代理服务器8080,由于代理服务器跟浏览器同一个域,就可以方便的将代理服务器8080的数据给浏览器8080。代理服务器转发的数据浏览器就可以接收到了。不难理解
什么是跨域问题?简单的说就是浏览器(前端人员)跟服务器不同端,浏览器为了安全不允许再不同网络下的数据通信,不能传输数据的问题
怎么解决跨域问题呢,就是设立一个代理服务器8080,跟浏览器8080同一个域,然后将服务器5000发过来的数据先发送给代理服务器8080,由于代理服务器跟浏览器同一个域,就可以方便的将代理服务器8080的数据给浏览器8080。代理服务器转发的数据浏览器就可以接收到了。
不难理解
首先第一步当然是引入axios包
终端输入
npm i axios
引入axios包
目前有两种方法进行跨域
方法1:只跨一个域,且这个域没有文件名跟前端文件同名
打开vue.config.js(没有的同学就在目录下新建一个)输入以下东西
module.exports={
devServer:{
proxy:'http://xxxxxx:8080'
}
}
这个就是跨域服务器,表示代理服务器将读取http://xxxxxx:8080下的东西
任意写一个axios请求
GetNum1(){
//本地浏览器文件没有selectArea文件,这个是服务器端的文件
//直接写在浏览器域名http://localhost:8081/下就可以实现跨域了
axios.get('http://localhost:8081/selectArea').then(
response =>{
console.log('请求成功'+JSON.stringify(response.data))
},
error =>{
console.log('请求失败了'+error.message)
}
)
console.log("收到名字了")
},
请求成功
当然这种方法也有一个小问题,若是你的文件也有一个叫selectArea的,那axios就不会把http://localhost:8081/selectArea转化为http://xxxxxxxxx:8080/selectArea,而是直接读去你localhost下的文件了,记得注意
第二种方法 跨两个域以上的
有时候我们有不止一个服务器,这时候我们需要另外一种写法
由于有两个位置,所以我们需要将两个位置的数据各起名many(服务器1)和aaa(服务器2)
devServer:{
proxy:{
'/many':{
target:'http://many:8080',
pathRewrite:{'^/many':''}
//正则表达式,/many 变为空字符串
//由于前面写http://localhost:8081/many/selectArea
//传到服务器是/many/selectArea,不是/selectArea
//所以现在将/many去掉
},
'aaa':{
target:'http://Other'
}
}
}
点击发送的按钮
可以发现多了一个many,代表发送的是服务器1
看上面的代码,由于这里传过去的是/many/selectArea,服务器接收的自然是/many/selectArea,
这样子会导致接收不到相应的数据,所以需要用正则表达式将many去掉
GetNum2(){
axios.get('http://localhost:8081/many/selectArea').then(
response =>{
console.log('请求成功'+JSON.stringify(response.data))
},
error =>{
console.log('请求失败了'+error.message)
}
)
}
请求成功
tip:每次修改vue.config.js的时候记得关掉vue重启一遍
更多推荐
所有评论(0)