vue3连接后端接口时，为什么会显示如下错误"AxiosError: Request failed with status code 404 at settle (http://127.0.0.1:5173/node_modules/.vite/deps/axios.js?v=91d3872c:1189:12) at XMLHttpRequest.onloadend (http://127.0.0.1:5173/node_modules/.vite/deps/axios.js?v=91d3872c:1417:7)"，该如何解决

时间: 2023-10-09 11:07:00 浏览: 920

vue 调用 RESTful风格接口操作

首先是简单的java接口代码写了四个让前端请求的接口，以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username+"--"+password); } @PostMapping("/v1/user") public Result lo Vue.js 是一个流行的轻量级前端框架，用于构建用户界面。在现代Web开发中，RESTful API 是一种标准的接口设计规范，它使得前后端之间的交互更为简洁和高效。本篇将详细介绍如何在Vue项目中调用RESTful风格的接口进行CRUD（创建、读取、更新、删除）操作，并探讨相关技术点。让我们看下Java后端提供的RESTful接口示例： 1. 登录接口：使用`@GetMapping`注解，路径是`/v1/user/{username}/{password}`，通过路径参数获取用户名和密码。 ```java @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200, username + "--" + password); } ``` 2. 创建用户接口：使用`@PostMapping`注解，路径是`/v1/user`，通过`@RequestBody`接收整个User对象。 ```java @PostMapping("/v1/user") public Result login3(@RequestBody User user){ return Result.succResult(200, "ok", user); } ``` 3. 更新用户接口：使用`@PutMapping`注解，路径是`/v1/user`，同样通过`@RequestBody`接收User对象。 ```java @PutMapping("/v1/user") public Result putUser(@RequestBody User user){ return Result.succResult(200, user); } ``` 4. 删除用户接口：使用`@DeleteMapping`注解，路径是`/v1/user/{id}`，通过路径参数获取用户ID。 ```java @DeleteMapping("/v1/user/{id}") public Result delete(@PathVariable Integer id){ return Result.succResult(200, id); } ``` 在Vue前端，我们通常会使用第三方库如Axios来发送HTTP请求。Axios是一个基于Promise的HTTP库，可以同时在浏览器和Node.js环境中使用，具有以下特性： 1. 支持XMLHttpRequests 和 Node.js HTTP 请求。 2. 具备Promise API，方便链式调用。 3. 提供请求和响应拦截器。 4. 支持请求和响应的数据转换。 5. 可以取消请求。 6. 自动转换JSON数据。 7. 防御XSRF攻击。安装Axios： ``` npm i axios --save ``` 在Vue项目中，我们可以全局引入并挂载到Vue实例上，便于组件间共享： ```javascript // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' Vue.prototype.$axios = axios ``` 接下来，我们将展示如何使用Vue和Axios调用上述接口进行CRUD操作： 1. GET请求：获取用户信息。 ```javascript this.$axios.get('/api/v1/user/' + this.username + '/' + this.password) .then(data => { alert('get//' + data.data.code); }) .catch(error => { alert(error); }); ``` 或使用查询参数： ```javascript this.$axios.get('/api/v1/user', { params: { username: this.username, password: this.password } }).then(data => { alert('get' + data.data.data); }).catch(error => { alert(error); }); ``` 2. POST请求：创建新用户。 ```javascript this.$axios.post('/api/v1/user', { username: this.username, password: this.password }).then(data => { alert('post' + data.data.data.password); }).catch(error => { alert(error); }); ``` 3. PUT请求：更新用户信息。 ```javascript this.$axios.put('/api/v1/user', { id: 1, username: this.username, password: this.password }).then(data => { alert('数据password:' + data.data.data.password); alert('数据username:' + data.data.data.username); }).catch(error => { alert(error); }); ``` 4. DELETE请求：删除用户。 ```javascript this.$axios.delete('/api/v1/user/1') .then(data => { alert('delete//' + data.data.code); }) .catch(error => { alert(error); }); ``` 在实际应用中，这些请求通常会被封装到Vue组件的方法中，以便更好地组织和复用代码。同时，为了提升用户体验，可以添加加载状态和错误处理逻辑，例如使用Vue的计算属性和错误边界。总结来说，Vue.js 结合 Axios 提供了简单且强大的API调用能力，能够方便地与RESTful风格的后端接口进行交互，实现CRUD操作。开发者可以根据具体需求对请求进行进一步封装和优化，以提高代码的可维护性和可扩展性。

这个错误表示你的前端应用（使用 Vue 3）尝试发送一个请求到后端接口，但是该接口返回了一个 404 错误，即请求的资源未找到。要解决这个问题，你可以尝试以下几个步骤： 1. 检查请求的 URL：确保你发送请求的 URL 是正确的，并且没有拼写错误或者缺少必要的路径参数。 2. 检查后端接口：确认后端接口是否正常运行，并且可以处理你发送的请求。检查后端接口的代码和路由配置，确保它们能够正确地处理来自前端的请求。 3. 检查网络连接：确保你的网络连接正常，尝试刷新页面或者重新启动网络设备。 4. 调试请求：使用开发者工具或者浏览器的网络调试工具，查看发送的请求和接收到的响应，检查是否有其他错误信息或者提示。 5. 联系后端开发人员：如果以上步骤都没有解决问题，你可以联系后端开发人员，询问是否有其他限制或者配置错误。请注意，由于我无法访问你的具体代码和后端接口，因此无法给出更具体的解决方案。建议你根据上述步骤进行排查，并根据实际情况采取相应的解决措施。

阅读全文

相关推荐

快速搭建Vue项目：Vue2/Vue3脚手架项目包

Vue/Antd：处理401错误，自动刷新Token实战

高校图书馆管理系统源码 前端：vue + element-ui + axios 后端：Springboot 数据库：mysql

vue-axios:vue+axios 接口文件封装

登录和注册 前端：vue3+iview plus +axios 后台：spring boot +mybatis

Vue-API后端

Vue调用后端java接口的实例代码

vue-admin-template:v一个Vue管理员后端模板项目

前端资源-vue连接后端脚手架模板资源.zip

vue+Java后端进行调试时解决跨域问题的方式

vue element自定义表单验证请求后端接口验证

vue结合axios与后端进行ajax交互的方法

order_manager:点餐后端。使用了fly（类似axios,用vue都知道）管理http请求,使用 async await等来进行管理http请求，使用请求拦截器根据分类进行code码提示和初始界面懒加载和请求错误处理，

解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

JAVA高校宿舍管理系统源码+数据库，前端Vue3，后端SpringBoot+Mybatis-Plus

Vue axios POST数据后端接收问题及解决方案

Vue与axios深度结合：全面教程与实战解析

Vue项目中axios的全面封装：错误处理、授权、路由与提示

tables-3.6.1-cp39-cp39-win_amd64.whl

最新推荐

解决vue2中使用axios http请求出现的问题

axios 处理 302 状态码的解决方法

详解vue与后端数据交互(ajax)：vue-resource

解决Vue axios post请求,后台获取不到数据的问题方法

解决vue net :ERR_CONNECTION_REFUSED报错问题

全国江河水系图层shp文件包下载

管理建模和仿真的文件

Keras模型压缩与优化：减小模型尺寸与提升推理速度

MTK 6229 BB芯片在手机中有哪些核心功能，OTG支持、Wi-Fi支持和RTC晶振是如何实现的？

点云二值化测试数据集的详细解读

高校图书馆管理系统源码前端：vue + element-ui + axios 后端：Springboot 数据库：mysql

登录和注册前端：vue3+iview plus +axios 后台：spring boot +mybatis