我院新闻
踩坑:AxiosError,request failed with status code 404,axios 404,axios请求404。附:axios封装
发布时间:2024-01-28

今天刚从库里克隆完代码,调登录接口的时候,报了一个很神奇的错误,就是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就好了。
特此记录一下,防以后再踩吧

[返回上级]