跨域避免 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，修改为简单请求，避免该请求发出预检。