在SpringBoot+jwt下,在vue中使用ajax来get请求后端,解决headers传到后端为null的情况。(AcWing SpringBoot项目)
在Spring Boot应用中使用JWT时,如果你发现通过Vue.js使用AJAX GET请求传递到后端的headers为null,很可能是因为跨域请求(CORS)问题或者是请求头部信息没有正确设置。
解决方法:
- 确保后端允许跨域请求。你可以在Spring Boot应用中添加一个跨域过滤器来允许特定的来源进行请求:
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080") // 或者使用通配符 "*" 开放所有域
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true);
}
}
- 确保AJAX请求中正确设置了请求头。在Vue.js中使用axios时,你可以设置
withCredentials
为true
来允许发送cookies:
axios.get('http://backend-url', {
headers: {
'Authorization': `Bearer ${token}` // 假设你使用了JWT
},
withCredentials: true // 如果你需要跨域请求时携带cookies
})
.then(response => {
// 处理响应
})
.catch(error => {
// 处理错误
});
如果你使用的是原生的XMLHttpRequest,确保在发送请求前设置了所有需要的headers:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://backend-url', true);
xhr.setRequestHeader('Authorization', `Bearer ${token}`);
// 如果需要跨域携带cookies
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应
} else {
// 处理错误
}
};
xhr.send();
如果后端需要特定的headers来验证JWT,确保在AJAX请求中正确地设置了这些headers。如果问题依然存在,检查后端的日志以确定是否是JWT验证失败导致的headers信息丢失。
评论已关闭