zoukankan      html  css  js  c++  java
  • 跨域避免 option 请求

    悟空H5专题采用的是前后端分离方案,服务器域名和专题域名不一致,会受到浏览器同源策略影响。

     

    我们发现数据主接口会发起两次,其中第一个请求为预检请求。

     

    一般来说使用 application/json 的 post 请求是必然会带入 OPTION 请求,何为 OPTION 预检:

    用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法,也可以对整站(通过将 URL 设置为“*”)使用该方法。

     

    在 CORS 中,可以使用 OPTIONS 方法发起一个预检请求,以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法;Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断,是否接受接下来的实际请求。

     

    有趣的是专题详情为 GET 接口,为何 GET 请求也会发起 option 预检?

     

    这个原因得从简单请求和复杂请求说起,跨域请求分为简单和复杂两种:

     

    简单请求:

     

    请求方式为如下之一:

    HEAD

    GET

    POST

     

    HTTP 请求头只能包含如下信息:

    Accept

    Accept-Language 

    Content-Language 

    Last-Event-ID 

    Content-Type,但仅能是下列之一 

    application/x-www-form-urlencoded 

    multipart/form-data 

    text/plain

     

    任何一个不满足上述要求的请求,即被认为是复杂请求。一个复杂请求不仅有包含通信内容的请求,同时也包含预检信息。

     

     

     

    专题配置接口请求头中带有自定义 header,浏览器会认定为非简单请求,需要向服务器发出检查,判断该域名是否允许跨域。

     

    经过分析发现,自定义 header 其实在此业务场景中非必传自带,发出预检请求至少会有 100ms 的耗时,无形中延长页面绘制时间。

     

    最终解决方案:去除自定义header,修改为简单请求,避免该请求发出预检

  • 相关阅读:
    typeid抛出异常的解释
    [原创]公平数的解法
    [原创]我的北大ACM POJ 1012解答
    [原创]我的PKU ACM POJ1029题解
    asp.net 单用户登录经典解决方案
    [转]SQL事务回滚的问题及其解决的方法
    获取json数据
    js中Date对象的用法
    解决刷新后回到顶部的问题
    C#获取客户端及服务器端主机信息
  • 原文地址:https://www.cnblogs.com/mengfangui/p/13474761.html
Copyright © 2011-2022 走看看