Vue用axios跨域访问数据
axios是vue-resource的替代品,vue-resource不再维护。
安装axios:npm install axios
使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
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里面的地址 } } }, -------------------- 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 } }
========================
axios传参
1:Vue官方推荐组件axios默认就是提交 JSON 字符串,所以我们要以json字符串直接拼接在url后面的形式,直接将json对象传进去就行了
let postData = {
companyCode:'zdz',
userName:'123456789123456789',
password:'123456'
}
axios.get('/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'