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

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);
      })
  }
  

• 执行的过程中出现的错误
  • 

错误原因

• 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方法测试，可以请求到了！