vue3+vite+ axios 跨域代理后看不到接口错误
时间: 2023-05-10 17:01:31 浏览: 299
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
5星 · 资源好评率100%
vue3是一个流行的前端框架,vite是一个快速的构建工具,而axios是一个常用的HTTP客户端库。在使用这些工具的时候,我们有时会遇到跨域问题,需要使用代理来解决。但是使用代理后,如果接口出现了错误,vue的开发者工具或者浏览器控制台可能不会显示出来,这可能会给我们的开发和调试带来很大的不便。
这个问题的出现可能是由于代理不会把错误的信息从服务器传递回来,或者浏览器没有显示代理返回的错误信息。一种解决方法是在axios的拦截器中添加一个error拦截器。这个拦截器会在接口出错时被触发,我们可以在拦截器里面进行错误处理,并将错误信息打印出来。例如:
```js
// 在创建 axios 实例时设置拦截器
const axiosInstance = axios.create({
baseURL: '/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
axiosInstance.interceptors.response.use(
response => {
// 正常返回 response
return response;
},
error => {
// 出现错误时触发
console.error(error);
// 返回错误信息
return Promise.reject(error);
}
);
```
这样,在使用axios发送请求的时候,如果接口出错了,就会在控制台中打印出错误信息,方便我们进行调试和处理。
阅读全文