1.在vue脚手架里面src文件下面创建一个api文件夹 里面分别创建index.js 和 request.js 如下图
2.request.js文件
// 请求
import axios from 'axios'
// create an axios instance 创建axios实例
const instance = axios.create({
baseURL: 'http://192.168.3.6:8082', // api 的 base_url
withCredentials: false//跨域时使用凭证,默认带上cookies
timeout: 2000, // request timeout 设置请求超时时间
})
// 添加请求拦截器
instance.interceptors.request.use(
config =>
return config;
},
error => {
return Promise.reject(error);
});
export default instance
3.index.js
import instance from './request'
// get接口
export function SelectableGetData() {
return instance({
url:'/field/selectAll',
method: 'get',
})
}
// post接口 普通传参
export function LoginPostData(email,password) {
return instance({
url:'/login',
method: 'post',
data:{
email,
password
}
})
}
// 当后端是query的时候前端就要使用params进行传参
export function DelTablePostData(id) {
return instance({
url:'/delTable',
method: 'post',
params:{
id
}
})
}
解决跨域问题 我选择的是第三方代理服务器
创建一个vue.config.js如下图
module.exports = {
// 关闭eslint
// lintOnSave:false,
// 代理跨域
devServer: {
proxy: { //配置跨域
'/api': {
target: 'http://192.168.3.6:8082', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是:http://192.168.3.6:8082/core/getData/userInfo,因为重写了 /api
*/
'^/api': '/'
}
},
}
},
}
注意:vue.config.js里面的target: 'http://192.168.3.6:8082'
与request.js文件的baseURL: 'http://192.168.3.6:8082'
两个地址要一样否则还是回报跨域的错误