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'

 

转载于:https://www.cnblogs.com/zdz8207/p/vue-axios-vue-resource-proxyTable-cookie.html