使用axios访问远程资源 Uncaught (in promise) Error: Request failed with status code 404

最新推荐文章于 2025-08-15 11:28:35 发布

原创最新推荐文章于 2025-08-15 11:28:35 发布 · 5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Vue项目中使用axios处理跨域请求时遇到的404错误，并提供了解决方案，包括配置代理和路径重写等步骤。

使用axios处理请求时，当url是远程接口链接时，会报404的错误，如下：在这里插入图片描述
解决方法如下：
1.使用Vue-cli2创建的项目
在config/index.js 中配置代理

proxyTable: {
      '/api': {
        target: 'http://47.102.115.146:8080',//代理的位置
        secure: true,
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: { //路径重置
          '^/api': ""   //只要访问以api为开头的路径，就会通过此代理 不会存在跨域问题
        }
      }
    },

如果是Cli3创建的项目，在vue-config.js中的proxy中进行配置

2.App.vue中使用axios获取数据

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    getDepartmentList() {
      axios.get("http://localhost:8080/api/department/departmentList").then(res=>{
          console.log(res)
      })
    }
  },
  created() {
      this.getDepartmentList()
  }
};
</script>

当访问localhost 8080接口的api时，代理会帮我们访问代理中uri的接口，获取想要访问的数据

执行npm run dev 运行项目
获取到了想要访问的数据：
在这里插入图片描述

将获取的信息通过data()以对象的形式返回：

<script>
import axios from "axios";
export default {
  name: "App",
  data(){
    return {
      departmentList:[]
      }
  },
  methods: {
    getDepartmentList() {
      axios.get("http://localhost:8080/api/department/departmentList").then(res=>{
          const response=res.data
          this.departmentList=response.data
      })
    }
  },
  created() {
      this.getDepartmentList()
  }
};
</script>

运行后，通过浏览器的Vue插件查看数据：
在这里插入图片描述
将数据以表格的形式展示在页面

<template>
  <div id="app">
    <table border="1">
      <tr v-for="item in departmentList" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </div>
</template>