vue 跨域 proxyTable不生效 解决办法
在网上查了半天,都没行,原来是要把axios再封装一层,再调用就OK了。1. 修改config目录下的index.js文件proxyTable: {'/':{target: 'http://localhost:8080',changeOrigin: true,ws: true,pathRewrite: {'^/': ''}...
·
在网上查了半天,都没行,原来是要把axios再封装一层,再调用就OK了。
1. 修改config目录下的index.js文件
proxyTable: {
'/':{
target: 'http://localhost:8080',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/': ''
}
}
2. 在scr目录下新建utils目录,将下面内容保存到api.js文件
import axios from 'axios'
axios.interceptors.request.use(config => {
return config
}, err => {
window.console.log({message: '请求超时!'})
// return Promise.resolve(err);
})
axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
if (data.status && data.status == 200 && data.data.status == 500) {
//业务逻辑错误
window.console.log({message: data.data.msg})
return
}
if (data.data.msg) {
Message.success({message: data.data.msg})
}
return data.data
}, err => {
if (err.response.status == 504 || err.response.status == 404) {
window.console.log({message: '服务器被吃了⊙﹏⊙∥'})
} else if (err.response.status == 403) {
window.console.log({message: '权限不足,请联系管理员!'})
} else if (err.response.status == 401) {
window.console.log({message: err.response.data.msg})
} else {
if (err.response.data.msg) {
window.console.log({message: err.response.data.msg})
} else {
window.console.log({message: '未知错误!'})
}
}
// return Promise.resolve(err);
})
let base = ''
export const postKeyValueRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
})
}
export const uploadFileRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
headers: {
'Content-Type': 'application/json'
}
})
}
export const deleteRequest = (url) => {
return axios({
method: 'delete',
url: `${base}${url}`
})
}
export const getRequest = (url) => {
return axios({
method: 'get',
url: `${base}${url}`
})
}
3. 这样调用
this.postKeyValueRequest('/user/login', {
name: this.username,
password: this.password
}, {
emulateJSON: true
}).then(msg => {
if (msg) {
alert(JSON.stringify(msg))
if (msg.code === 200) {
this.$router.push({
name: 'home',
params: {
userInfo: msg.data
}
})
} else {
alert('用户名密码错误')
}
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)