Vue用axios跨域访问数据

时间:2023-03-08 17:28:57
Vue用axios跨域访问数据

Vue用axios跨域访问数据
axios是vue-resource的替代品,vue-resource不再维护。
安装axios:npm install axios
使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。

通过this.$http去调用axios,如果之前你的vue-resourse也是这么写的话,可以无缝切换。换成this.axios也是没有问题的。

proxyTable相关配置及使用说明:
在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置,配置如下:
dev: {
env: require('./dev.env'),
host: 'localhost',
port: 8088,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://api.douban.com/v2/movie/',//设置你调用的接口域名和端口号 别忘了加http、https
changeOrigin: true,//是否跨域
secure: true, // 允许https请求
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址
}
}
},
--------------------
axios请求不携带cookie
this.axios.defaults.withCredentials = true;// 跨域携带cookie
在跨域的情况下不仅前端要设置withCredentials,后端也是要设置Access-Control-Allow-Credentials的。
this.$http.post(this.$store.state.apis + "/index/index/getToken",qs.stringify({})).then( res => {
this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
this.axios.defaults.headers.post['token'] = res.data.data.token;
this.axios.defaults.withCredentials = true;// 跨域携带cookie
})
==================
main.js
/*ajax请求*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//https://api.douban.com/v2/movie 改成/api才能用proxyTable跨域
Vue.prototype.$ajax = axios

--------------------
proxyTable配置的意思为:使用字符串"/api"来代替目标接口域名;如果接口地址为"user/getUserInfo",我们可以在所有的接口地址前面加上"/api/"用于设置代理;如:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'
如果你不想每次请求地址中都带有"/api/",则可以设置
pathRewrite: {
'^/api': '' // 后面可以使重写的新路径,一般不做更改
}
表现结果为:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'
另外一种情况是,我们不需要在每个接口地址前添加"/api/",只需要用接口本身的地址,不需要重新路径即可。如果接口为:"/v2/cotton/get_app_list",使用"/v2"做代理;如下:
dev: {
proxyTable: {
'/v2': {
target: 'http://www.abc.com', //目标接口域名
changeOrigin: true, //是否跨域
secure: false, // 允许https请求
// 这里去掉了重新设置新路径,因为接口地址本身就是以"/v2/"开头的;
}
}
'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
// http://localhost:8080/v2表示http://www.abc.com
默认情况下,不接受运行在 HTTPS 上,且使用了无效证书的后端服务器。如果你想要接受,修改配置如下:
proxy: {
"/api": {
target: "https://www.abc.com",
secure: false
}
}
========================

2:在需要调接口的组件中这样使用:
axios.post('/api/yt_api/login/doLogin',postData)
.then(function (response) {
console.log(1)
console.log(response);
})
.catch(function (error) {
console.log(error);
})

注意:原接口:http://http://121.41.130.58:9090/yt_api/login/doLogin
页面调用:http://localhost:8081/api/yt_api/login/doLogin ——这里多了一个/api/不是多余的,不要删

二:axios传参
1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了
let postData = {
  companyCode:'zdz',
  userName:'123456789123456789',
  password:'123456'
}
axios.get('/api/yt_api/login/doLogin',{
  params: {
    ...postData,
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

这里我们将postData这个json对象传入到post方法中

2:以key:val的形式传参
(1).安装qs:npm install qs
(2).对这个json对象操作
let postData = qs.stringify({
companyCode:'zdz',
userName:'123456789123456789',
password:'123456'
})
(3).再导入
import qs from 'qs'