前端请求接口报axioserror

1.背景

最近做的一个效果需要传一个表单,我按照要求传回去data.但是传回去直接报错

2.解决过程

报错的信息是axioserror,我最开始以为是我axios请求出错,因为我习惯封装axios进行请求,

 后面我又使用没有封装的axios进行封装,结果浏览器依然会报axios错误,当时我初步确定是我axios请求错误

 紧接着我又换了另一种fetch请求,结果axios没有报错,

 浏览器开始报新的错误,我去搜过一下这个错误大概意思说的是关于网络被BAN了(域名被屏蔽,目的IP被封),导致无法找到资源。

 但是最奇怪的是我测试的环境配的域名都是国内的,完全不可能出现访问外网。这个报错我暂时放在一边,因为我现在打算 去postman测试一下这个接口,因为现在接口前端使用了两种请求方式都会出现不同报错,然后我就去postman测了一下接口,postman正常返回参数没有任何问题,浏览器我去看了一下,前端传回去的参数都有,状态码没有,后面我又去看了一下请求头地址,我发现请求头地址和我代码封装地址不一样,浏览器headers里面的地址指向的是一个代理的地址,问题是我没有开代理。

3.总结

后面我找到后端问了他一下,他说他还在查错,我当时问了他叫他看看自己是否开了代理,他后面说他开了代理至于到底是什么错误,还在查找中。。。。。。。。

### 使用 Axios 进行 API 请求前端项目中使用 Axios 发起 API 请求相对简单。以下是具体方法: #### 导入 Axios 并发起 GET 请求 对于简单的 GET 请求,可以按照如下方式操作[^1]: ```javascript import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => { console.log('请求成功', response.data); }) .catch(error => { console.error('请求失败', error); }); ``` 这段代码展示了如何导入 `axios` 模块并调用其 `.get()` 方法来获取数据。 #### 安装 Axios 和基本配置 如果尚未安装 Axios,则需通过 npm 或 yarn 来安装它: ```bash npm install axios ``` 之后可以在项目的入口文件或其他合适位置设置一些全局默认参数,比如超时时间和基础 URL 等[^3]: ```javascript // 设置全局默认值 axios.defaults.timeout = 2000; axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN'; axios.defaults.baseURL = 'http://localhost:5000'; ``` 这样做的好处是可以减少每次请求时重复输入相同的信息。 #### 创建自定义实例 为了更好地管理和维护不同类型的请求,还可以基于特定配置创建新的 Axios 实例: ```javascript const customAxiosInstance = axios.create({ baseURL: 'https://api.customservice.com', headers: {'X-Custom-Header': 'foobar'} }); ``` 这允许为不同的服务或环境定制专属的行为模式而不影响其他部分的功能。 #### 处理 POST 请求及上传/下载文件 当涉及到发送表单数据或者处理文件传输时,POST 请求就显得尤为重要了。这里给出一个用于提交 JSON 数据的例子以及从服务器接收二进制流作为响应的情况下的解决方案[^4]: ```javascript // 提交JSON数据到API端点 customAxiosInstance.post('/submit-data', { key: "value" }, { responseType: 'json' }) .then((response) => { // 成功后的逻辑... }); // 下载文件 function downloadFile(url, params) { const config = { method: 'post', url, data: qs.stringify(params), responseType: 'blob' // 表明这是一个二进制文件而非纯文本 }; return axios(config).then(({data})=>{ let link=document.createElement('a'); link.href=window.URL.createObjectURL(new Blob([data])); link.download="filename.ext"; // 文件名可以根据实际情况调整 document.body.appendChild(link); link.click(); setTimeout(() => { window.URL.revokeObjectURL(link.href); // 清除临时链接对象 document.body.removeChild(link); }, 100); }).catch(err=>console.warn(`Error downloading file ${err}`)); } ``` 上述例子不仅涵盖了常规的数据交互场景,还特别针对文件下载提供了实用的技术方案。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值