今天刚从库里克隆完代码,调登录接口的时候,报了一个很神奇的错误,就是axios请求404,难道我封装错了,刚把跨域解决了,就出来一个这个,后面我检查了很多遍封装,还有代理,确实确实没错,最主要我之前用我封装的跑通过。
下面是封装的axios,没错可以用。
http.js
import axios from 'axios'
var http=axios.create({
baseURL:'api',//解决跨域问题
timeout:3000
})
//在请求和响应在被catch和then处理之前处理他们
//拦截请求,在请求之前拦截,一般可以在请求头中加上token
http.interceptors.request.use((config)=>{
//config就是很多参数被封装在了一个对象里,
//里面的参数也是属性,最常见的比如说url(必要)/method(默认get)/params
let token = localStorage.getItem('X-Token') || ''
// `headers` 是即将被发送的自定义请求头,在请求头中加上token
config.headers['X-Token'] = token//修改config的参数headers
config.headers['Content-Type'] = 'application/json'
return config//参数已经修改好
}, err => {//响应出错执行,比如说网断了
console.log(err);
})
//响应拦截器
http.interceptors.response.use(response=>{
if (response.status === 200) {
if (response.data.state === 401) {
//如果是token过期,跳转至登录
alert("登录已过期,请重新登录!");
localStorage.removeItem('token')
router.push({path:'/login'})
} else if (response.data.state === 0) {
return response;
} else {
return response;
}
}
},err=>{
return Promise.reject(err)
})
export default http
request.js
import http from './http'
export default function request({ method = "post", params = {}, data = {},url={} }){
return http({
url,//请求路由
method,//请求方式
data,//data传递,json字符串,
params:params//params传递,传统表单形式
//get大多数时候用params传。如果非要用data,需要转成传统表单形式。
})
}
operDate.js
import request from './request.js'
export const xxx=(params)=>{
return request({method:"post",url:'xxxx', params})
}
后面,主要是因为确实我之前能跑通,能保证代码没错,所以我就重新 npm install。重新下载了node_modules就好了。
特此记录一下,防以后再踩吧