Ajax跨域设置请求头,options验证失败解决办法

 费德  2016/09/19 20:40  1,188 次

问题概述

昨天晚上调试一个接口,原先通过在后台代码中设置同源策略以解决ajax跨域问题,但是在做最后面的token联调,把token加到请求头中进行权限验证的时候,却提示404(接口仅允许接受POST请求,其他请求方法无法识别).
QQ图片20160919202613.png
折腾了将近4个小时,然后在网上找到一篇文章,介绍ajax请求中,如果自定义请求头,XHR会首先发送一个OPTIONS嗅探请求,然后 XHR 会根据OPTIONS请求返回的Access-Control-*等头信息判断是否有对指定站点的访问权限,并最终决定是否发送实际请求信息。
14430614389070771.png
从上面这张图片中,发现我的问题主要出在无法接受options请求上。

解决办法

直接在nginx.conf或者你的vhost文件中,加入如下内容

if ($request_method = 'OPTIONS') { 
add_header Access-Control-Allow-Origin *; 
add_header Access-Control-Allow-Credentials true; 
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; 
return 204; 
}

如图:
微信截图_20160919204030.png

参考文章:
ajax 跨域机制详解,为什么 XMLHttpRequest 的 POST 请求会变 OPTIONS 请求
Nginx如何进行跨域配置,才能使用DELETE,PUT请求方法

 作者:费德

少年费德的奇幻漂流

本博客如无特殊说明皆为原创,转载请注明来源:Ajax跨域设置请求头,options验证失败解决办法

添加新评论