浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass access cont

  

这个问题也是很过分头一次遇到，原因是谷歌浏览器在有跨域（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。

附上一个链接：如何解决跨域问题，以及跨域预检未通过问题 - 千山暮雪向谁去 - 博客园has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Ithttps://www.cnblogs.com/gaolight/p/14446100.html