美文网首页
http-server --cors启动为啥访问还是跨域?pre

http-server --cors启动为啥访问还是跨域?pre

作者: twentyshaw | 来源:发表于2023-02-24 19:31 被阅读0次

    最近在研究京东的微前端框架@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对象

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

    相关文章

      网友评论

          本文标题:http-server --cors启动为啥访问还是跨域?pre

          本文链接:https://www.haomeiwen.com/subject/dscxldtx.html