最近在研究京东的微前端框架@micro-zoe/micro-app
按照文档配好主应用和微应用以后,将微应用打包编译,使用http-server --cors
启动后,在主应用中访问时,调某个接口报错了:
上图是一个动态国际化资源的请求,显示跨域了 这就很奇怪了,其他静态资源能正常拉取,证明子应用是支持跨域访问的,但是这个请求挂掉了
这个报错也很离谱:
Cross-Origin Resource Sharing error: HeaderDisallowedByPreflightResponse
从报错看应该还是跨域的问题,我就猜测是 http-server
这个工具本身的问题
进行了大量的搜索,在他的github上找到一个issue:[Question] How to set cors headers?
这里面的一个回答引起了我的注意🤔
这里说
--cors=xxx
就可以在 allow header 上加一个 xxx,
所以我试着将我的子应用启动命令改了一下:
- 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
对象
以上条件只要满足了一个,就会触发预检请求
网友评论