因为vue-resource不在更新,vue推荐使用axios,所以使用axios。
在页面交互过程中,发现axios一定几率会发送两次请求,一次是自己设置的请求方式,还有一次是options。
关于这个问题,在各个网站寻求原因,得出以下结论:
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
也就是说,它会先使用options去测试,你这个接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始正常请求。
关于这个问题,需要在后台进行设置,允许options请求,不然你的请求就会受到影响,后台并作出判断,如果请求方式为options,告诉它可以通讯,其他直接什么都不做。
以下是PHP做设置内容
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
if(strtoupper($_SERVER[‘REQUEST_METHOD’])== ‘OPTIONS’){
exit;
}

有些老php没有做过前后端分离,会直接甩锅给前端.时代在变化.必须不断学习才行.前端nuxt用(vue官方推荐的)axios发送post请求 php中做一下判断就可以了

 if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
   echo 'options请求,已忽略。';
    exit; 
}

允许跨域不就是服务端设置Access-Control-Allow-Origin: *就可以了吗?普通的请求才是这样子的,除此之外,还一种叫请求叫preflighted request。
preflighted request在发送真正的请求前,会先发送一个方法为OPTIONS的预请 求(preflight request),用于试探服务端是否能接受真正的请求,如果options获得的回应是拒绝性质的,比如404\403\500等http状态,就会停post. put等请求的发出。
那么什么情况下请求会变成preflighted request呢?
1、请求方法不是GET/HEAD/POST
2、POST请求的Content -Type并非application/x-www-form-urlencoded, multipart/form-data,或text/plain3、请求设置了自定义的header字段
上面请求中设置了自定义的headers字段,出现了option请求。把自定义headers字段删掉后,只剩下get请求:

QQ技术交流群:634196762

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐