(1).什么是跨域
跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况:
网络协议不同,如http协议访问https协议。
端口不同,如80端口访问8080端口。
域名不同,如qianduanblog.com访问baidu.com。
子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。
域名和域名对应ip,如www.a.com访问20.205.28.90.
(2).在vue中如何解决跨域
1).porxy代理
在config/index.js中:
proxyTable: {
'/api': {
target: 'http://localhost:8083/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //這裡true表示实现跨域
pathRewrite: {
'^/api':'/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
通过axios来实现发送访问:
在main.js中导入已安装好的axios,并挂载到原型上
import Axios from 'axios' //导入axios
//将axios挂载到原型上
Vue.prototype.$axios = Axios;
通过this.$axios.get().then()来实现数据请求
//发送get请求
show() {
//用/api來代理'http://localhost:8083'
this.$axios
.get("/api/selectall")
.then(res => {
this.list = res.data.result;
// }
})
.catch(e => {
console.log(e);
});
},
//发送post请求
add() {
this.$axios({
method: "post",
url: "/api/saveinfo",
params: {
name: this.name //传递的参数
}
}).then(res => {
this.show();
});
},