使用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值是什么、本地代理怎么配置的、后端完整的接口地址是什么