vue开发问题——根据http code码排除网络请求的故障，axios示例

最新推荐文章于 2024-05-06 14:38:57 发布
最新推荐文章于 2024-05-06 14:38:57 发布
阅读量1.4k 收藏 1
点赞数 2
分类专栏： vue开发问题 文章标签： vue http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lazy33/article/details/109479878
版权

如何根据code码排查请求错误

同我的其他文章一样，都是自己项目中遇到的问题。一说到http的请求返回的code码。有很多优秀的文档，写了前因后果，如何解决，但是都是大，多是自己dome或者项目中遇到的问题，所以解决问题的过程很坎坷，尽管是一样的错误，但是解决方式又不一样，在这里我把自己的经理记录下来。当作留念了哈~

在HTTP1.1协议下，HTTP状态码总共可分为5大类：
1xx：请求收到，继续处理
2xx：操作成功收到，分析、接受
3xx：完成此请求必须进一步处理
4xx：请求包含一个错误无法或不能完成
5xx：服务器执行一个完全有效请求失败

先贴出一篇文章，讲得非常详细

来自于 【装满哈希的Map】的 HTTP协议网络请求状态码，详细~

注：所有的请求，在控制台仔细看！都会在里面找到线索的！下面我会把我的经历贴出来，其他同胞免受http code错误之苦

我们后台展示swagger-ui，软件是idea，语言是java。前后端分离。请求为axios

一般会有个测试接口，无需登录，验证，token，就可以交互的数据，下面是我的一个测试接口，拿到返回值是，男，女
在这里插入图片描述

如果说你一开始测试接口都报错的话，说明---------你写的接口不对啊，小老弟（当然不排除你们那个不靠谱的后端没有启动项目，所以请求之前先看看后台起动没有）
两种方法查看，1、登录他的后台接口ip页面，能访问就是启动了的。2、倒杯茶，揉一揉肩，让他赶紧起

下面是我自己随便起的一个后台，前台的请求的接口dome，测试用的是axios的cdn

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <button onclick="Inter()"> 点击请求</button>

    <script>
        function Inter() {
            axios.get('http://192.168.1.111:8820/dict/gender')
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>

</html>

在这里插入图片描述
这里看到确实能用，那么就开整（如果是封装、加密什么的，就拿这部分测试就挺好 ）

一、(Access-Control-Allow-Origin) 以下是请求分页数据接口地址。
Access to XMLHttpRequest at 'http://192.168.1.15:8820/cadre/listcadre?pageNo=1&pageSize=10' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

嗯！Access-Control-Allow-Origin，大名顶顶的跨域错误~至于怎么跨域，我的上篇文章有分享，用vue内置vue.config.js Nginx代理跨域，作用就是伪装下请求的headers，

二、(code 404;timeout)http://localhost:8081/api/login 404 (Not Found)或者 timeout ****
在这里插入图片描述

其实如果说404，或者timeout（超时）一定是接口地址没有写对，非常低级的错误了，但是还有可能是有其他原因
1、vue.vonfig.js 里面的proxy 的target后台地址书写错误，所请求访问不到
2‘、axios的方法 请求地址书写错误
3、后台打了断点
4、后台压根儿没起动~

如果是以上地址都确认无误，请参考上篇 白屏的文章 可能是baseURL，或者.env.production 的基础路径配置错误

三、（code 400）POST http://localhost:8081/api/api/merchant/export 400 (Bad Request)

  • bed request 首先从控制台得出这是个坏请求。那么我是从以下几个方面看的。打开Network
    控制台
  • 下面发红的request 点开之后可以看到
    在这里插入图片描述
    以及request Payload
    在这里插入图片描述
    检查请求分为几个方面

  1. 日常检查是否接口地址是否错误

  2. 如果是get请求，Request URL:后面肯定有以"?"查询字符串的形式拼接的参数
    在这里插入图片描述
    如果是post请求，那么上面第二张图的Payload里面就是post携带参数，对比和后台的数据格式，数据名称是否有异同

  3. Content-Type:和后端要求是否一致
    在这里插入图片描述

  4. 如果你确实使用的post方式，但是Payload没有出现你传的参数，可能是你封装的axios有问题哦，比如像我axios博文里面写到的（如下图），用qs模块把参数序列化
    在这里插入图片描述
    或者当时封装的时候参数并不是在后台想要位置
    在这里插入图片描述
    比以上get就是正常方式，而delete呢，是拼接在url后面，而download又是body里面，并且在里面加入了responseType

四、
在这里插入图片描述

Access to XMLHttpRequest at 'http://139.9.***.*/estate-admin-api/login.jsp;JSESSIONID=a2d98be3-f057-4f96-9728-bdeb39e4fff8' (redirected from 'http://localhost:8081/api/api/property/list?pageNo=1&pageSize=15') from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
和
http://139.9.***.*/estate-admin-api/login.jsp;JSESSIONID=a2d98be3-f057-4f96-9728-bdeb39e4fff8 net::ERR_FAILED
先挑简单看得懂的
1、Network Error ，网络错误，先看你本机有没有有网络，或者去后端的swagger-ui看看能不能访问，
2、'Access-Control-Allow-Origin' header 同源策略的请求头，如果你和我一样添加了请求拦截器，在里面塞了token（如下图）
在这里插入图片描述
那么我怀疑是token过期了，检查Application里面的Session Storage（或者Local），果然没有，遂退出，重新登陆，ok！
在这里插入图片描述

五、code 401

  • 这个是我在swagger测试的时候，会出现401 ，意思是无权限，就是未登录在这里插入图片描述

六、(code 500) Inter Server Error 或者 Request failed with status 500
在这里插入图片描述
在这里插入图片描述

当出现500 的时候，一般会下意识的认为是后端语法问题，或者接口的问题。题主呢经历过大概有以下几个方面。

  • 前端报错500，根据后台的idea，并没有日志，发现请求并没有走进去，进检查，前端的打包时候地址少了一个 / （通过日志确定方向，到底是前，还是后端的错误）
  • 本身后台的java语法真的真的写错了。这就是自身的原因了，就是接口语法错误。（-.-！）
  • 前端传值错误。其实这个也是因为后端的错误，比如常见的就是前端新增数据，为了图简便，个人电话没写，是个空的。但是等你请求展示个人信息，后台会对你的电话号码做处理（比如说只展示后四位），到时候，此时你新增数据的电话是空的，后台又没有做非空判断，所以造成后台空指针，java语言错误，报错500。(更据后端风格把，最好是前后端都做非空判断，能避免不少麻烦)
  • 后台修改接口。这个比较容易疏忽。比如说现在个人信息有 【姓名】【年龄】，此时上线。上线后客户说应该新增【性别】一栏。于是后台返回性别字段。新增的数据有了【性别】字段，但是，原来的旧的测试数据没有【性别】字段，造成数据查询空指针。语法性错误，报错500 .（你发现更改字段，或者参数，自己去清空数据库，或者提示后端，毕竟直接给人说报错500找半天要好太多。。）

————Lazy33

欢迎多多补充，多多点赞~

Lazy33
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue 项目根据http状态码渲染404页面，500页面
weixin_40716786的博客
11-29 8996
最近做的vue项目中，前端需要根据http不同状态码，渲染不同的页面。比如请求出错404，服务器内部错误500等。 我们需要做的是根据http返回的的404和500状态码渲染页面。 在main.js使用了axios的拦截器 import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' import route...
axios获取发起请求的地址 vue_vue中axios处理http发送请求的示例（Post和get）
weixin_39531834的博客
01-26 744
本文介绍了vue中axios处理http发送请求的示例(Post和get)，分享给大家，具体如下：在处理http请求方面，已经不推荐使用vue-resource了，而是使用最新的axios，下面做一个简单的介绍。安装使用nodenpm install axios使用cdn基本使用方法get请求// Make a request for a user with a given IDaxios.get...
vue 移动端今天写了一个根据后台传过来的http状态码，来实现跳转error页面
guoyiq的博客
11-24 4963
首先是现在main.js里面进行配置Vue.prototype.$onError = function (error) { var error_msg = '网络错误'; var toastFlag = true; switch (error.errorCode) { case 401: error_msg = '请先登录'; ...
vue项目全局判断axios请求,根据返回的code做后续操作
TVM的博客
11-30 1942
1.main.js中引入axios //引入axios import axios from 'axios' Vue.prototype.$axios = axios 2.在axios请求返回中进行拦截判断 axios.interceptors.response.use(data => { let code = data.data.code; if (code == "4001") { doSomething.. }else if(code == "4002"){
vue+flask编写网站时访问vue页面提示Network Error
mich99的博客
04-30 965
flask 页面挂载在 127.0.0.1:8010 vue页面挂载在 127.0.0.1:8080（axios.defaults.baseURL = ‘http://127.0.0.1:8010’） 运行后可以访问8010端口，但是当访问8080端口时提示Network Error，安全组端口以设置 经查，发现8010端口被forward到了1527端口 猜测是8010端口被占用 看了一下还真是 所以直接修改app.py中的页面端口为5000， axios.defaults.baseURL = ‘ht
Vue项目报错：Uncaught (in promise) Error Network Error
m0_54849873的博客
03-02 1492
vue项目可以打开登录页面，但点击登录报错的原因：AP接口没打开 解决： 找到文件的api_server sheft+右键打开Powershell， 输入node app.js 点击回车即可
Vue项目中如何使用Axios封装http请求详解
10-16
在现代的前端开发中，使用Vue框架时经常需要处理网络请求。Axios作为一个基于Promise的HTTP客户端，广泛用于浏览器和node.js环境中，因其简洁的API、支持拦截器、请求/响应转换等特性，成为Vue项目的首选http请求库...
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
10-17
本篇内容将详细解读如何在Vue项目中使用axios进行全局拦截get和post请求，并提供实际的代码示例。这样的拦截机制能够帮助开发者在请求发送前和响应返回后执行特定的逻辑处理，比如添加全局的请求头、处理登录验证等...
vue 里面使用axios 和封装的示例代码
08-29
Vue 中使用 Axios 和封装的示例代码 在 Vue 项目中，使用 Axios 库来发送请求是一种常见的做法。Axios 库提供了一个基于 Promise 的 API，能够发送异步请求，并且提供了许多实用的功能，例如取消请求、超时设置、...
Vue封装Axios请求和拦截器的步骤
10-14
在Vue开发中，使用axios作为HTTP库是非常常见的选择，因为它具有强大的功能和易用性。Vue封装Axios请求和拦截器的目的是为了提高代码的可维护性和复用性，以及提供统一的错误处理机制。以下是对这个主题的详细说明：...
vue使用axios出现Network Error
m0_56199142的博客
07-09 1万+
解决方法： 把axios跨域请求地址的http改成https就行
【Vue-2】flask+vue时，浏览器可正常访问，但从vue访问返回Error: Network Error
清凌的博客
05-29 2833
问题: flask+vue时，flask的网址可正常访问，但从vue访问返回【Error: Network Error】 解决方案： 在flask里 加一句： CORS(app, supports_credentials=True) 解决跨域问题，服务端把CORS配置好，或者用node做代理层访问API 浏览器访问时，对跨域请求进行了组织, 而vue的response没有, 所以用浏览器是可以进行请求的并且请求成功了, 但是vue肯定是不行的. 开发环境的话可以通过Cors做一个中间层进行代理, js发
http请求axios封装
xye1230的博客
05-18 353
来抄作业 import axios,{AxiosError,AxiosRequestConfig,AxiosResponse,Canceler,CancelTokenSource} from 'axios' export interface AjaxResponse{ request:()=>Promise<AxiosResponse> //Axios异步函数 cancel:Canceler //关联的cancel方法 } const baseConfig={ validateS
VUE Uncaught (in promise) Error: Network Error vue项目中net::ERR_CONNECTION_TIMED_OUT错误
lgq1368853532的博客
05-10 1723
setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题。修改axios\axios.interceptor.js, duration:300000,Message({message:"请求超时,请检查本地或服务器网络情况!修改src\main.js,500000)
记一次打包vue，ios真机调试和打包安装都出现 Network Error
weixin_45878530的博客
03-16 498
将axios原码的请求方式 var request = new XMLHttpRequest() 改为 var request = new plus.net.XMLHttpRequest()
Spring Cloud+Vue前后端分离项目报错：Network Error；net::ERR_FAILED（请求跨越）
weixin_50799264的博客
02-18 3417
Spring Cloud+Vue前后端分离项目报错：Network Error；net::ERR_FAILED 请求跨越问题
Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK
热门推荐
blog-xiaoh的博客
08-24 5万+
Vue2 跨域问题报错AxiosError net::ERR_FAILED、 Network Error、ERR_NETWORK
vue前后端相连接报错：Network ErrorAxiosError: Network Error at XMLHttpRequest.handleError
m0_74132943的博客
10-15 1万+
其实这个错误不要害怕；因为这是你很可能是你的..........这个错误通常是由于前端无法访问到后端接口..................................
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
最新发布
cdfdfgrd的博客
05-06 923
vue ERRORNetwork ErrorAxiosError: Network Error at XMLHttpRequest.handleError (webpack-
vue axios代码封装示例
09-20
### 回答1： Vue Axios 代码封装示例可以参考如下：// 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout })// request 拦截器 service.interceptors.request.use( config => { // 在发送请求之前做一些处理 // ... return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } )// response 拦截器 service.interceptors.response.use( response => { const res = response.data // 如果返回的状态码不是200，则reject if (res.code !== 200) { return Promise.reject(res.message || 'Error') } else { return res } }, error => { return Promise.reject(error) } )export default service ### 回答2： Vue axios 提供了一种方便的方式来发送 HTTP 请求和处理响应。以下是一个简单的示例，展示了如何封装 axios 代码。 首先，需要在项目中安装 axios： ``` npm install axios ``` 然后，在你的Vue组件中，你可以创建一个名为axiosService.js的文件，并将以下代码添加到该文件中： ```javascript import axios from 'axios'; // 创建一个 axios 实例，可以在所有的请求中共享该实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置请求的基础URL timeout: 5000 // 设置请求超时时间 }); // 请求拦截器，在发送请求前可以对请求进行一些处理 instance.interceptors.request.use( config => { // 在请求发送前做一些处理，例如添加 token 到请求头部 config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token'); return config; }, error => { // 处理请求错误 console.error(error); return Promise.reject(error); } ); // 响应拦截器，在接收到响应后可以对响应进行一些处理 instance.interceptors.response.use( response => { // 在接收到响应数据前做一些处理 return response.data; }, error => { // 处理响应错误 console.error(error); return Promise.reject(error); } ); export default instance; ``` 现在，在你的 Vue 组件中，你可以导入 `axiosService.js` 并使用 `axios` 实例来发送请求： ```javascript import axiosService from '@/axiosService'; export default { data() { return { users: [] }; }, methods: { getUsers() { axiosService.get('/users') .then(response => { this.users = response; }) .catch(error => { console.error(error); }); } }, mounted() { this.getUsers(); } }; ``` 这是一个简单的封装示例，当然你可以根据你项目的需求来进行更复杂的封装。这样可以提高代码的可重用性，并使代码更易于维护。 ### 回答3： 以下是一个Vue Axios代码封装的示例： 首先，我们需要安装`axios`和`vue-axios`，可以通过npm或者yarn进行安装。 然后，我们创建一个util文件夹，并在其中创建一个`http.js`文件。在`http.js`中，我们导入`axios`和`vue-axios`，同时创建一个名为`http`的实例，并设置其基本的请求配置。 ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; import Vue from 'vue'; Vue.use(VueAxios, axios); const http = axios.create({ baseURL: 'http://api.example.com', // 设置默认的请求地址 timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头类型 }, }); export default http; ``` 在`http.js`中，我们创建了一个名为`http`的实例，这样我们可以在整个项目中使用该实例来发送请求，并可以设置一些默认的请求配置。 接下来，我们可以在其他需要发送请求的组件中引入`http.js`文件，并使用`http`来发送请求。 ```javascript import http from '@/utils/http'; export default { methods: { fetchData() { http.get('/data').then(response => { // 处理响应数据 }).catch(error => { // 处理错误 }); }, sendData() { const data = { // 请求的数据 }; http.post('/data', data).then(response => { // 处理响应数据 }).catch(error => { // 处理错误 }); }, }, }; ``` 在上述示例中，我们首先引入了`http.js`文件，然后通过使用`http`来发送请求。我们可以使用`http.get`来发送GET请求，使用`http.post`来发送POST请求，等等。在请求的结果中，我们可以使用`.then`来处理成功的响应，使用`.catch`来处理错误。 通过封装`http.js`文件，我们可以在整个项目中使用同样的请求配置，同时也可以更好地管理请求和错误处理的逻辑。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lazy33

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值