VUE中关于axios特别说明request failed with status code 404

水深无声 2022-05-08 06:08 1109阅读 0赞

# VUE中关于axios特别说明request failed with status code 404 #

### 现场还原 ###

*  这是在vue项目中，开始模拟数据用的是mock，进行假数据测试
 *  在后台接口开发完毕之后，与真实数据做对接
 *  当时在main.js是这样写的【除了长横线（-------------）的地方，其他地方暂时忽略】
    
     
    
        import Vue from 'vue'
        import App from './App'
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-default/index.css'
        import VueRouter from 'vue-router'
        import store from './vuex/store'
        import Vuex from 'vuex'
        import routes from './routes'
        import Mock from './mock'//----------------------------注意这个地方--mock
        
        import axios from 'axios'//----------------------------注意这个地方--axios
        import ajax from './lib/ajax/Ajax.js'//----------------注意这个地方--axios
        
        
        
        Mock.bootstrap();//------------------------------------注意这个地方--mock
        import 'font-awesome/css/font-awesome.min.css'
        
        Vue.use(ElementUI)
        Vue.use(VueRouter)
        Vue.use(Vuex)
        
        Vue.prototype.$ajax = axios;//---------------------------注意这个地方--axios
        Vue.prototype.$http = ajax;//----------------------------注意这个地方--axios
        
        
        const router = new VueRouter({
            routes
        })
        
        router.beforeEach((to, from, next) => {
            if (to.path == '/login') {
                sessionStorage.removeItem('user');
            }
            let user = JSON.parse(sessionStorage.getItem('user'));
            if (!user && to.path != '/login') {
                next({path: '/login'})
            } else {
                next()
            }
        })
        
        new Vue({
            router,
            store,
            render: h => h(App)
        }).$mount('#app')
 *  方法post调用
    
     
    
        getCompanyInfo: function () {
            this.$ajax.get('cszj/company/getCompanyById').then((response) => {
                alert(response.data);
            }).catch((response) => {
                alert("错误：" + response);
            })
        }
 *  执行的过程中出现的错误
    
     *  ![c9s5dDE.png][]

### 错误原因 ###

*  mock和axios冲突

### 解决方案 ###

*  将mock注释掉
 *   
    
        import Vue from 'vue'
        import App from './App'
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-default/index.css'
        import VueRouter from 'vue-router'
        import store from './vuex/store'
        import Vuex from 'vuex'
        import routes from './routes'
        //import Mock from './mock'//----------------------------注意这个地方--mock【注释掉】
        
        import axios from 'axios'//----------------------------注意这个地方--axios
        import ajax from './lib/ajax/Ajax.js'//----------------注意这个地方--axios
        
        
        
        //Mock.bootstrap();//------------------------------------注意这个地方--mock【注释掉】
        import 'font-awesome/css/font-awesome.min.css'
        
        Vue.use(ElementUI)
        Vue.use(VueRouter)
        Vue.use(Vuex)
        
        Vue.prototype.$ajax = axios;//---------------------------注意这个地方--axios
        Vue.prototype.$http = ajax;//----------------------------注意这个地方--axios
        
        
        const router = new VueRouter({
            routes
        })
        
        router.beforeEach((to, from, next) => {
            if (to.path == '/login') {
                sessionStorage.removeItem('user');
            }
            let user = JSON.parse(sessionStorage.getItem('user'));
            if (!user && to.path != '/login') {
                next({path: '/login'})
            } else {
                next()
            }
        })
        
        new Vue({
            router,
            store,
            render: h => h(App)
        }).$mount('#app')

### 再进行post方法测试，可以请求到了！ ###

[c9s5dDE.png]: https://i.imgur.com/c9s5dDE.png