前端使用ajax向springboot写的后端服务器(配了拦截器)时出现Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.问题的解决办法。如果可以确定跨域不存在问题,那问题很可能就出现在拦截器上!
完整的报错长这样:
Access to XMLHttpRequest at 'http://localhost:8881/user/userInfo' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
–
看见CORS,一开始以为是跨域问题,随后逐步调试了一下,发现跨域改写的代码都写了,拦截器也可以正常放行。实在找不到什么错误了。
于是就在网上找了一下解决办法,发现这个错误的产生原因是在使用axios发送请求的时候,加入了自定义请求头headers: { ‘Content-Type’: 'application/j // 其他需要的头},然后 axios 就会产生options试探请求。
折腾了很久才知道。是配置的拦截器拦截了预检请求(preflight request)。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求,它用于检查实际请求是否可以被服务器接受。
当你的拦截器拦截到这种OPTIONS请求时,如果没有正确地处理(例如,返回正确的CORS头部信息),那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送,从而导致你看到的错误Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.
所以我们需要确保拦截器在处理OPTIONS请求时,返回正确的CORS头部信息。要在拦截器中检查请求的HTTP方法,如果是OPTIONS方法,那么就直接返回一个包含正确CORS头部信息的响应。
下面是拦截器应该写的代码
//配置拦截器
@Component
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//处理预请求的代码
if (request.getMethod().equals("OPTIONS")) {
response.setHeader("Access-Control-Allow-Origin", "*");//*表示放行所有的源,http://127.0.0.1:5500
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, HEAD, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setStatus(HttpServletResponse.SC_OK);
return false;
}
//其他代码……
}
}
/*
Access-Control-Allow-Origin: 这个头部指定了哪些源(origin)可以访问该资源。在这里,它被设置为"*",这意味着任何源都被允许访问。
Access-Control-Allow-Methods: 这个头部指定了在实际请求中可以使用哪些HTTP方法。在这里,它包括"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"。
Access-Control-Allow-Headers: 这个头部指定了在实际请求中可以使用哪些HTTP头部。在这里,它被设置为"*",这意味着任何头部都被允许。
Access-Control-Allow-Credentials: 这个头部指定了是否允许发送Cookie。在这里,它被设置为"true",这意味着允许发送Cookie
*/