vue中axios请求接口性能优化

薄洪涛6年前 (2019-07-24)JS1819

Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/jso使用这个请求头会出现向服务器请求两次的情况，有的时候会大大影响服务器的性能，下图是我项目中的一个接口请求，可以看到，发起了两次请求，我查看了下状态栏，第一次请求是OPTIONS，第二次是POST，第二次请求才是我们需要的；

最开始的时候，我查阅了资料，知道了第一次请求叫预请求

预请求大概意思就是：

浏览器对后台说：我可以请求你吗？ (￣ˇ￣)　
后台说：阔以。(￣▽￣)~*
结果是：发送原有的GET(POST)请求
后台说：不阔以。(‵﹏′)
结果是：报错

尤其是跨域的时候，会有一次预请求，很是影响性能，上图中预请求都用了202毫秒，然后我和前端商量下，本来想前端处理，去拦截这个option请求的，但是，我们的请求header中加入了一些鉴权数据，所以就不是一个简单的请求，必须要发送预请求；如果是简单请求的话，安装node的qs包就可以实现前端的拦截！

于是我想了2种解决方法，一种在nginx种拦截，另一种在api种拦截（index.php种检测到options请求不进行任何处理，直接返回）

对于方法1，实现如下：

if ( $request_method = 'OPTIONS' ) { 
add_header Access-Control-Allow-Origin $http_origin; 
add_header Access-Control-Allow-Headers Sessionid, Signature, Userid, Userphone; 
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT; 
add_header Access-Control-Allow-Credentials true; 
add_header Access-Control-Allow-Headers X-Data-Type,X-Auth-Token; 
}

对于方法2，实现如下：

if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Sessionid, Signature, Userid, Userphone");
    header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
    exit;
}

对比两种方法，特别需要注意的时allow-headers里面一定要和预请求返回的一致