vue axios 跨域出现options请求解决方案

原创 NishavayaZhou 教程 项目 1383阅读 2017-11-14 15:24:12 举报

公司在更新项目接口的时候发现一个很奇怪的问题,在axios中明确有规定使用POST请求

vueaxios跨域出现options请求解决方案

vueaxios跨域出现options请求解决方案
,但是浏览器却监听到了两次请求,一次是OPTIONS,另一次是POST请求。并且将我传递给后台的数据格式更改了。

vueaxios跨域出现options请求解决方案
查了相关的资料才发现这是跨域资源共享 CORS,它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request);而我所遇到的问题就是所谓的非简单请求,在正式通信之前,增加一次HTTP查询请求(POST请求),称为"预检"请求。而他们的区别无非就是请求头的不同。

vueaxios跨域出现options请求解决方案
知道了两者的区别,并且明确知道数据格式的问题那么只需要更改Content-Type请求头的值就可以了。我将Content-Type的值改为application/x-www-form-urlencoded之后OPTIONS请求确实没有了,直接POST请求,但是参数格式依然有问题

vueaxios跨域出现options请求解决方案
这个数据格式依然不是服务器端想要的啊。没办法只能出绝招了————只能去axios官网走一波了。
官网上原来已经给出方案了使用application/x-www-form-urlencoded,URLSearchParamsAPI将参数格式转换一下。

vueaxios跨域出现options请求解决方案
完美,看样子出现了问题,最后还是要去官网走一波,

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复