http-server --cors启动为啥访问还是跨域？preflight又是什么东西？

最近在研究京东的微前端框架@micro-zoe/micro-app

按照文档配好主应用和微应用以后，将微应用打包编译，使用http-server --cors启动后，在主应用中访问时，调某个接口报错了：

这个报错也很离谱：

Cross-Origin Resource Sharing error: HeaderDisallowedByPreflightResponse

从报错看应该还是跨域的问题，我就猜测是 http-server这个工具本身的问题

进行了大量的搜索，在他的github上找到一个issue：[Question] How to set cors headers?

这里面的一个回答引起了我的注意🤔

所以我试着将我的子应用启动命令改了一下：

- http-server --cors
+ http-server --cors='*'

然后再访问，居然就好了😮

太离谱了。。。

虽然解决了问题，但心里面还是一堆疑惑，

比如，上面那个报错里面的 preflight是个啥？

为了搞清这个报错，查了很多资料，下面记录一下我学到的一些东西

预检请求preflight

Preflight请求是一种用于CORS（跨域资源共享）的HTTP请求，它通常在实际请求（比如GET、POST、PUT等）之前发送，以确定实际请求是否安全。当浏览器需要跨域发送一个请求时，会先发送一个OPTIONS请求，该请求包含了一些头部信息，如Origin、Access-Control-Request-Method和Access-Control-Request-Headers等。服务器收到这个请求后，会根据请求头中的信息来判断实际请求是否安全。如果服务器认为实际请求是安全的，就会返回一个包含Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等头部信息的响应，以允许浏览器发送实际请求。

Preflight请求的目的是确保跨域请求的安全性，防止恶意攻击和信息泄露。在实际应用中，Preflight请求往往是由浏览器自动发起的，开发者可以通过设置服务器的CORS响应头来控制Preflight请求的行为。

下面这篇文章更加详细的举例介绍了预检请求： 浅谈浏览器中的preflight请求 写得很好👍

总结一下就是：

• 预检请求是浏览器自发的行为

通常preflight请求不需要用户自己去管理和干预，它的发出的响应都是由浏览器和服务器自动管理的

• 预检请求只会在存在跨域的时候触发

所以我单独访问子应用时并没有发现这种情况。。。

• 预检请求会在实际请求之前发送

可以看到我的报错截图的确是这样的

存在一个 204 的 preflight

• 什么时候会触发预检请求呢？

• 使用 GET POST HEAD 以外的请求方法时

• 请求头中存在Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width Width以外的字段时

（这也是我的微应用工程中的请求触发preflight的原因。工程里面有个拦截器，给每个请求都加了个自

定义的请求头。。。）

• Content-Type 中存在 text/plain multipart/form-data application/x-www-form-urlencoded 以外的字段时
• XMLHttpRequestUpload对象注册了事件监听器时
• 使用了ReadableStream对象

以上条件只要满足了一个，就会触发预检请求