我之前的博客已将讲了使用Axios,现在我们拉看一看如何实现跨域
我们这里还是使用Vue-cli 2.x版本
1.跨域设置
加入本地localhost访问接口http://12.3421.45:8080/会抱跨域的错误。
其实开发的话在webpack配置一下proxyTable就OK了,如下
在 config / index.js
dev: {
加入以下
proxyTable: {
'/api': {
target: 'http://12.3421.45:8080/',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''
//这里理解成用‘api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://12.3421.45:8080/',直接写‘api/user/add’即可
//
}
}
},
在生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置:
在 config / dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST: '"/api"' //这里的api就是我们在 config / index.js 中设置的target路径
})
在 config / prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"test"',
API_HOST: '"http://127.0.0.1:3001/"'
}
2.获取数据
上main我们已经在 dev 和 production 环境下分别设置的接口的路径,接着我们就可以在axios的统一配置中引用了。
我之前的博客使用Axios,讲到过关于axios的一些配置。
1.axios配置文件中
引入 process.env.API_HOST,并作为get/post请求的baseURL
'use strict';
import axios from 'axios';
import qs from 'qs';
const URL = process.env.API_HOST; // 当前环境的接口前缀
// axios拦截器的请求设置
axios.interceptors.request.use(config => { // 这里的config包含每次请求的内容
// 判断localStorage中是否存在api_token
if (localStorage.getItem('api_token')) {
// 存在将api_token写入 request header
config.headers.apiToken = `${localStorage.getItem('api_token')}`;
}
return config;
}, err => {
return Promise.reject(err);
});
// axios拦截器的响应设置
axios.interceptors.response.use(response => {
return response;
}, error => {
return Promise.resolve(error.response);
});
// 检查http状态码返回是否正常
function checkStatus(response) {
// 如果http状态码正常,则直接返回数据
if (response && (response.status === 200 || response.status === 304 ||
response.status === 400)) {
return response;
}
// 异常状态下,把错误信息返回去
return {
status: -404,
msg: '网络异常'
};
}
function checkCode(res) {
// 如果code异常(这里已经包括网络错误,服务器错误,后端抛出的错误),可以弹出一个错误提示,告诉用户
if (res.status === -404) {
alert(res.msg);
}
if (res.data && (!res.data.success)) {
// alert(res.data.error_msg)
}
return res;
}
// 请求方式的配置
export default {
post(url, data) { // post
return axios({
method: 'post',
baseURL: URL,
url,
data: qs.stringify(data),
timeout: 5000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
}).then(
(response) => {
return checkStatus(response);
}
).then(
(res) => {
return checkCode(res);
}
);
},
get(url, params) { // get
return axios({
method: 'get',
baseURL: URL,
url,
params, // get 请求时带的参数
timeout: 5000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(
(response) => {
return checkStatus(response);
}
).then(
(res) => {
return checkCode(res);
}
);
}
};
1.我们建立publicServer.js管理所有接口
export const AjaxUrl = {
test: '/hcd'
};
2.在页面中引用,并使用
import {AjaxUrl} from '../common/ajax/serverPublic';
get() {
this.$ajax.post(AjaxUrl.test).then((response) => {
console.log(response);
});
}