遇到你描述的这种情况,通常涉及到多个方面的因素,包括前端设置、后端配置以及网络协议的理解。下面我将详细解释可能的原因和解决方案。
1. 前端设置:axios与token
在Nuxt项目中使用axios发送请求时,你可能在axios的拦截器中添加了token,这本身是正确的做法。但是,需要注意的是,当你的请求被重定向时,axios默认不会自动携带Authorization
头信息。这是由于浏览器的安全策略限制,即CORS(跨源资源共享)政策。当请求从一个源被重定向到另一个源时,浏览器会认为这是一个新的请求,并且不会自动携带预飞行请求(如Authorization
头)中的敏感信息。
2. 后端配置:307重定向
服务器返回307状态码表示临时重定向,这意味着原始请求应该被重复到另一个URI,保持原来请求的方法和头部信息不变。但是,由于上述提到的浏览器安全策略,实际上在第二次请求时Authorization
头信息丢失了,导致后端验证失败,返回401状态码。
3. 解决方案
为了处理这种情况,你可以采取以下几种方法之一:
- 手动处理重定向:在axios的响应拦截器中检查是否收到了307重定向,如果是,则手动发起一个新的请求到重定向的目标URL,并确保携带
Authorization
头。
axios.interceptors.response.use(
response => {
if (response.status === 307) {
const location = response.headers.location;
return axios.get(location, {
headers: {
Authorization: `Bearer ${token}`
}
});
}
return response;
},
error => Promise.reject(error)
);