SpringBoot+VUE+Axios 【链接超时】 后端正常返回结果，前端却出现错误无法接收数据

一、错误原因及解决思路

错误提示表明前端发送的请求在默认的 2500ms 超时时间内没有得到服务器的响应，导致请求失败。尝试以下方法来解决这个问题：

1. 增加请求超时时间：可以通过配置 Axios 请求对象的 timeout 属性来增加请求的超时时间，例如将其设置为 5000ms。
2. 检查网络连接：如果网络连接存在问题，可能会导致请求响应不及时或超时。请确保网络连接稳定，并且没有防火墙或代理服务器阻止了请求的传输。
3. 削减请求数据量：如果正在向服务器发送大量数据，可能会导致请求响应时间过长。请检查发送的请求数据，考虑削减其数据量或者优化其结构。
4. 检查服务器状态：如果服务器存在负载过重或性能问题，可能会导致请求响应时间延迟或超时。请确保服务器状态正常，并且可以处理发送的请求。

通过以上方法中的任意一种或多种，都可以尝试解决 Vue 前端发送请求超时的问题。

二、我的解决方案

上下文环境： SpringBoot+VUE+Axios，前端发送请求，后端接收后向用户邮件发送验证码，邮件发送完毕，后端给前端反馈。

出现链接超时的原因： 后端发送邮件耗时长，超过了axios默认的超时时间

解决方案： 设置axios超时时间为更长的时间

原请求方法为：

this.$axios.post("http://localhost:xxxx/oa/user/sendEmailVerCode",param).then(rst => {this.emailCodeForm.afterEndCode = rst.data;this.emailCodeForm.sendCodeFlag=true;// 已发送验证码console.log(rst.data)}).catch(ex => {console.log(ex);});

在使用 $axios 发送请求时，通过配置 timeout 属性来增加请求的超时时间。具体实现方法如下：

this.$axios.post("http://localhost:xxxx/oa/user/sendEmailVerCode", param, {// 将超时时间设置为 20000mstimeout: 20000,}).then((rst) => {this.emailCodeForm.afterEndCode = rst.data;this.emailCodeForm.sendCodeFlag = true; // 已发送验证码console.log(rst.data);}).catch((ex) => {console.log(ex);});

在上述代码中，我们在 $axios.post() 方法的第三个参数中，将 timeout 属性设置为 20000ms，这意味着如果请求在 20000ms 内没有得到响应，Axios 会自动将其视为超时错误并返回一个错误信息。然后，我们可以通过 .then() 和 .catch() 方法处理请求的响应结果和错误信息。

需要注意的是，也可以在创建全局的 $axios 实例时设置默认的超时时间，例如：

import axios from 'axios';const instance = axios.create({baseURL: 'http://localhost:xxxx',timeout: 20000, // 默认的超时时间
});export default ({ app }, inject) => {inject('axios', instance);
};