使用axios报错 Request failed with status code 404

Question

api

import {
  request
} from '@/utlis/request'

// banner
export function getBanner() {
  let res = request('/banner', 'GET')
  return res
}

axios

import axios from 'axios'
import {
  Toast
} from 'mint-ui'

export const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 20 * 1000
})

// request
instance.interceptors.request.use(config => {
  return config
}, error => {
  Promise.reject(error)
})

// response
instance.interceptors.response.use(response => {
  const res = response.data
  return Promise.resolve(res)
}, error => {
  Toast(error.message)
  return Promise.reject(error)
})

export const request = async (url = '', type = 'GET', data = {}, isForm = false) => {
  let result
  type = type.toUpperCase()
  let requestOptions = {
    method: type,
    url: url
  }
  if (isForm) {
    let form = new FormData()
    Object.keys(data).forEach(key => {
      let value = data[key]
      if (Array.isArray(value)) {
        value.forEach(item => {
          form.append(key, item)
        })
      } else {
        form.append(key, data[key])
      }
    })
    data = form
  }
  requestOptions['headers'] = {
    'Content-type': isForm ? 'multipart/form-data' : 'application/json'
  }
  if (type === 'GET') {
    requestOptions['params'] = data
  } else {
    requestOptions['data'] = data
  }
  await instance(requestOptions).then(res => {
    result = res
  })
  return result
}

page

<template>
  <div class="index">
    <!-- banner -->
    <music-banner :json='bannerJson'></music-banner>
  </div>
</template>

<script>
import MusicBanner from '@/components/MusicBanner'
import {getBanner} from '@/api/index'
export default {
  name: 'index',
   components: { MusicBanner },

  data() {
    return{
      bannerJson: []
    }
  },

  mounted() {
    this.getBannerData()
  },

  methods: {
    getBannerData(){
      getBanner().then(res => {
        the.bannerJson = res.data
      })
    }
  }

}
</script>

Answer 1

404就是你请求的实际接口地址在后端找不到。
需要提供很多信息才能判断具体原因，比如是本地开发还是打包部署后的、你的process.env.VUE_APP_BASE_API值是什么、本地代理怎么配置的、后端完整的接口地址是什么

Answer 2

看了axios封装和axios调用，都没多大问题。我看主要的问题应该是api跨域代理的问题。
process.env.VUE_APP_BASE_API大致是开发环境中api代理的地址。估计最大的问题就出在这里面。
vue-cli2中api的代理都在config的index.js中proxyTable部分。
proxyTable: {

  // 设置代理请求
  '/api': {
    target: 'http://192.168.1.12:8081/api/', // 接口地址
    changeOrigin: true, //是否跨域
    pathRewrite: {
      '^/api': '/', //本身的接口地址没有"/api"这种通用前缀,所以要rewrite,如果本身有则去掉.
    },
  },
},

开发环境的代理api设置在dev.env.js中
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VUE_APP_BASE_API: '"/api"',
})
VUE_APP_BASE_API设置为"/api" ,这样就和后面的呼应上了。应该问题就解决了。
至于生产环境，由于生产环境一般是nginx部署，所以api代理的问题在nginx中设置。vue代码可以不用设置。