我正在使用带有代理的Nuxt-axios模块 .
对于错误处理,我有共同的代码
Plugins/axios.js
export default function({ $axios, __isRetryRequest, store, app, redirect , payload , next}) {
$axios.onRequest(config => {
if (app.$cookies.get('at') && app.$cookies.get('rt') && config.url != '/post_login/') {
config.headers.common['Authorization'] = `Bearer ${app.$cookies.get('at')}`;
}
});
$axios.onResponseError(err => {
const code = parseInt(err.response && err.response.status)
let originalRequest = err.config;
if (code === 401) {
originalRequest.__isRetryRequest = true;
store
.dispatch('LOGIN', { grant_type: 'refresh_token', refresh_token: app.$cookies.get('rt')})
.then(res => {
originalRequest.headers['Authorization'] = 'Bearer ' + app.$cookies.get('at');
return app.$axios(originalRequest);
})
.catch(error => {
console.log(error);
});
}
// code for 422 error
if (code == 422) {
throw err.response;
}
});
}
在我的页面文件夹索引页面上
Pages/index.vue
<template>
<section>Component data</section>
</template>
<script type="text/javascript">
export default {
async asyncData({ route, store }) {
await store.dispatch('GET_BANNERS');
}
}
</script>
所有API调用都在stroes / actions.js文件中 .
现在问题是当我刷新页面index.vue第一个API请求将命中并获得响应,如果成功 . 但是现在如果第一次请求('GET_BANNERS')来自asyncData并且它获得401错误未经授权那么我就会收到以下错误
Error: Request failed with status code 401
错误[ERR_HTTP_HEADERS_SENT]:无法在将标头发送到客户端后设置标头
我怎么解决这个问题?
few more questions:
1)当我在axios中编写常见错误代码时,我收到401的原始请求如何设置数据再次存储(我们通常从操作文件中执行)?
2)任何人都可以帮助最佳实践附加400,401,422等的授权 Headers 和错误句柄 .
2 回答
@ canet-robern希望这会解决你的问题!!
错误
ERR_HTTP_HEADERS_SENT
表示您的服务器端代码中存在错误 - 因此来自此错误的错误出现在HTTP标头之前 .要处理 4xx 错误并重试Axios请求,请遵循以下示例: