完整报错:
Access to XMLHttpRequest at 'http://localhost:58081/api/v1/house/page' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
报错场景:
使用axios请求,并在请求头添加token,发送请求,后端能成功接收请求,但请求头没有token,导致过滤器拿不到token进行校验。
错误的产生原因是在使用axios发送请求的时候,加入了自定义请求头headers: { ‘Content-Type’: 'application/j // 其他需要的头},然后 axios 就会产生options试探请求。
是配置的过滤器拦截了预检请求(preflight request)。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求,它用于检查实际请求是否可以被服务器接受。
解决:
当你的拦截器拦截到这种OPTIONS请求时,如果没有正确地处理(例如,返回正确的CORS头部信息),那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送,所以我们需要确保拦截器在处理OPTIONS请求时,返回正确的CORS头部信息。要在拦截器中检查请求的HTTP方法,如果是OPTIONS方法,那么就直接返回一个包含正确CORS头部信息的响应。
需要在权限认证过滤器添加如下代码:
// 处理预请求的代码
if ("OPTIONS".equals(((HttpServletRequest) request).getMethod())) {
((HttpServletResponse) response).setHeader("Access-Control-Allow-Origin", "*");
((HttpServletResponse) response).setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, HEAD, OPTIONS");
((HttpServletResponse) response).setHeader("Access-Control-Allow-Headers", "*");
((HttpServletResponse) response).setHeader("Access-Control-Allow-Credentials", "true");
((HttpServletResponse) response).setStatus(HttpServletResponse.SC_OK);
return;
}