文章目录
拦截（下载axios框架）
1. 在根目录下面可以创建一个utils或者其他目录，然后在创建一个统一进行拦截的文件api.js
2.导入相关的axios和router,以及进行弹框处理的Message的element-ui的组件
3.写上你的拦截器
代码如下：
import axios from 'axios'
import {
Message } from 'element-ui'
import router from '../router'
//请求拦截器
axios.interceptors.request.use(config=>{
//如果存在token,请求携带这个token
if(window.sessionStorage.getItem('tokenStr')){
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config;
},error => {
console.log(error);
})
// 响应拦截器
axios.interceptors.response.use(success =>{
if(success.status && success.status == 200){
// 401没有登录 403权限禁止
if(success.data.code == 500 || success.data == 401 || success.data.code ==403){
Message.error({
message:success.data.message});
return;
}
if(success.data.message){
Message.success({
message:success.data.message});
}
}
return success.data;
},error => {
// 如果根本没有访问到服务器
if(error.response.code == 504 || error.response.code == 404){
Message.error({
message:'服务器被吃了o(╯□╰)o'});
}else if(error.response.code == 403){
Message.error({
message:'权限不足，请联系管理员'});
}else if(error.response.code==401){
Message.error({
message:'尚未登录，请登录'});
router.replace("/");
}else {
if(error.response.data.message){
Message.error({
message:error.response.data.message});
}else {
Message.error({
message:'未知错误'})
}
}
return;
})
let base = '';
//传送json数据的post请求
export const postRequest=(url,params)=>{
return axios({
method:'post',
url:`${
base}${
url}`,
data:params
})
}
//携带数据的get请求
export const getRequest=(url,params)=>{
return axios({
method:'get',
url:`${
base}${
url}`,
data:params
})
}
export const deleteRequest=(url,params)=>{
return axios({
method:'delete',
url:`${
base}${
url}`,
data: params,
})
}
export const putRequest=(url,params)=>{
return axios({
method:'put',
url:`${
base}${
url}`,
data: params,
})
}
跨域处理
1.在根目录下面创建一个vue.config.js文件，然后写上如下的内容，相关的注释里面有写
let proxyObj={
}
proxyObj['/']={
// webSocket的代理
ws:false,
// 目标地址
target:'http://localhost:8081',
// 发送请求头host会被设置为target
changeOrigin: true,
//不重写请求地址
pathRewrite:{
'^/':'/'
}
}
module.exports={
devServer:{
host:'localhost',
port:8080,
proxy:proxyObj
}
}