has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check

has been blocked by CORS policy: Response to preflight request doesn't pass access control check

这个错误是添加完CorsFilter之后发生的错误，咋一看好像CorsFilter没有生效，其实CorsFilter生效了，而且通过log可以看出postman调用只调用一次，谷歌浏览器调用会调用两次，原因是谷歌浏览器在有跨域（CORS）请求时，会先发送一个preflight（预检）请求，之后才会发送fetch请求。

CORS：跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源HTTP请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

问题：虽然前端只调用了一次接口，但是浏览器会发送两次请求，第一次是preflight请求，之所以会发这个请求是为了保证当前调用接口的有效性，避免资源浪费，确保有效链接。服务端在处理接口的时候直接按照客户端的fetch请求处理，并没有对preflight请求处理，返回了前端400。

解决办法：服务端对preflight请求和fetch请求做不同处理，两个请求不能走同一套逻辑，因为preflight请求不会携带request参数过去，只有fetch请求才会携带request。即在CorsFilter中增加代码：

        HttpServletRequest request = (HttpServletRequest)req;if ("OPTIONS".equals(request.getMethod())) {response.setStatus(HttpServletResponse.SC_OK);return;}

前端啥也不用干，不用加什么xhrFields.withCredentials:true!，后端也不需要加什么Access-Control-Allow-Credentials", "true"。

完整的代码：

@ServletComponentScan(basePackages={"com.xxx.base","com.xxx.open"})
@SpringBootApplication(scanBasePackages={"com.xxx.base","com.xxx.open"})
public class App {public static void main(String[] args) throws Exception {SpringApplication.run(App.class, args);}
}

import com.xxx.base.util.Utils;import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebFilter(urlPatterns = "/*", filterName = "CorsFilter")
public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;HttpServletRequest request = (HttpServletRequest) req;System.out.println(">>>>>>>>>>>>>>>>>来了》》》》》》》》》》》》》》》》"+request.getHeader("Origin"));if(Utils.isEmptyTrim(request.getHeader("Origin"))){response.setHeader("Access-Control-Allow-Origin", "*");}else{response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));}
//        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");response.setHeader("Access-Control-Allow-Headers", "*");
//        response.setHeader("Access-Control-Expose-Headers", "*");response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Max-Age", "3600");//response.setHeader("Access-Control-Allow-Credentials", "true");if ("OPTIONS".equals(request.getMethod())) {response.setStatus(HttpServletResponse.SC_OK);return;}chain.doFilter(request, response);}@Overridepublic void destroy() {}
}

参考原文：https://blog.csdn.net/weixin_53512283/article/details/123923734

has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check相关推荐

has been blocked by CORS policy: Response to preflight request doesn‘t pass access control
先说一下我的问题: 一般来说这种问题是因为跨域配置错误. 但是,我后端接口正常,跨域配置也没问题,api也没问题,理应能正常访问,就是莫名其妙报错. 经过一番探索之后发现问题所在: 将localhos ...
浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass access cont
这个问题也是很过分头一次遇到,原因是谷歌浏览器在有跨域(CORS)请求时,会先发送一个preflight(预检)请求,之后才会发送fetch请求. CORS:跨源资源共享 (CORS)(或通俗地译为跨 ...
关于跨域 Response to preflight request doesn‘t pass access control check
做项目的时候由于访问了不同的服务器,然后导致了跨域问题,报错情况为: has been blocked by CORS policy: Response to preflight request do ...
Response to preflight request doesn‘t pass access control check: The value of the ‘Access-Control-Al
错误:Response to preflight request doesn't pass access control check: The value of the 'Access-Control ...
GO + React + Axios Response to preflight request doesn't pass access control check: It does not hav
使用Go + Reat 使用 Axios 请求后端, 出现: Access to XMLHttpRequest at 'http://127.0.0.1:20002/v1/user/login' fr ...
关于Springboot中跨域问题的解决(Response to preflight request doesn‘t pass access control check)
Springboot中跨域问题的解决等不及的小伙伴,直接跳到结论部分即可,谢谢!!! 1. 背景 1.1 使用技术栈 Spring Security Springboot Vue.axios Jwt ...
跨域Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
最近后端添加自定义请求头拦截器后,前端也增加请求头后,解决过程中先后出现两种跨域错误. 一.请求后台出现如下跨域问题: has been blocked by CORS policy: Respons ...
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin跨域问题
出现问题:在本地运行,有配置vue.config.js中的proxy,所以解决了跨域问题.但将项目打包放到服务器上去,在打包的过程中,proxy是不会被打包进去的,也就是说代理所配置的跨域就已经失效了 ...
跨域 Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
在登录的时候没有跨域问题, token 认证的时候就跨域了(请求拦截器中配置的请求头携带 token),有点玄学了. 后端没有报错,不过显示请求方法为 OPTION 预检请求.前端报错如下,解决也很简 ...

has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check

has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check相关推荐

最新文章

热门文章