http请求发生了两次(options请求)
前言
自后台restful接口流行开来,请求了两次的情况(options请求)越来越普遍。笔者也在实际的项目中遇到过这种情况,做一下整理总结。
文章书写思路:
为什么发生两次请求
http的请求方式,包括OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT等八种请求方式。其中,get与post只是我们常用的请求方式。
我们能在图一里看到,第一条的请求方式为options,第二条请求,才是我们预想中的请求。所以为什么发生两条请求的原因就变成了为什么发生options请求。
options请求
options请求的官方定义:OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法,客户端可以在采取具体资源请求之前,决定对该资源采取何种必要措施,或者了解服务器的性能。
用白话说就是:在发生正式的请求之前,先进行一次预检请求。看服务端返回一些信息,浏览器拿到之后,看后台是否允许进行访问。
如何产生options请求:
产生options请求的原因包括以下几条:
1:产生了复杂请求。复杂请求对应的就是简单请求。简单请求的定义是:
- 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。
- 请求中没有自定义HTTP头部。
所谓的自定义头部,在实际的项目里,我们经常会遇到需要在header头部加上一些token或者其他的用户信息,用来做用户信息的校验。
2:发生了跨域。
options请求有什么作用
官方将头部带自定义信息的请求方式称为带预检(preflighted)的跨域请求。在实际调用接口之前,会首先发出一个options请求,检测服务端是否支持真实的请求进行跨域的请求。真实请求在options请求中,通过request-header将 Access-Control-Request-Headers与Access-Control-Request-Method发送给后台,另外浏览器会自行加上一个Origin请求地址。服务端在接收到预检请求后,根据资源权限配置,在response-header头部加入access-control-allow-headers(允许跨域请求的请求头)、access-control-allow-methods(允许跨域请求的请求方式)、access-control-allow-origin(允许跨域请求的域)。另外,服务端还可以通过Access-Control-Max-Age来设置一定时间内无须再进行预检请求,直接用之前的预检请求的协商结果即可。浏览器再根据服务端返回的信息,进行决定是否再进行真实的跨域请求。这个过程对于用户来说,也是透明的。
另外在HTTP响应头,凡是浏览器请求中携带了身份信息,而响应头中没有返回Access-Control-Allow-Credentials: true的,浏览器都会忽略此次响应。
总结:只要是带自定义header的跨域请求,在发送真实请求前都会先发送OPTIONS请求,浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。所以复杂请求肯定会两次请求服务端。
options请求如何避免
其实通过以上的分析,我们能得出以下解决方案:
1:使用代理,避开跨域。
2:将复杂跨域请求更改为简单跨域请求。
3:不使用带自定义配置的header头部。
实际案例
笔者现在维护的项目之一是用angularjs作为框架,使用$resoruce进行的通信,请求头默认采用content-type: application/json。所以即使拿掉请求头里前台自定义的token,仍然还会在post请求中额外发出options请求,因为不满足简单请求的条件。而get请求没有这这个情况。
笔者将header头里的token拿掉后,get的options请求消除了。
上图中,post发出了options请求。原因在于content-type。
去除post的options请求:
有人想问不想用options请求,却又想验证用户信息该怎么做呢?这个时候考虑通过cookie进行。
http请求发生了两次(options请求)的更多相关文章
- easyui datagrid 加载两次请求,触发两次ajax 请求 问题
datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"> ...
- Http中的options请求
引自:https://www.jianshu.com/p/5cf82f092201.https://www.cnblogs.com/mamimi/p/10602722.html 一.options是什 ...
- ( 转 ) CORS 有一次 OPTIONS 请求的原理
刚接触前端的时候,以为HTTP的Request Method只有GET与POST两种,后来才了解到,原来还有HEAD.PUT.DELETE.OPTIONS-- 目前的工作中,HEAD.PUT.DELE ...
- http跨域时的options请求
1.背景 在前后端分离的项目中经常会遇到跨域请求的问题,如果没有进行跨域配置,会浏览器请求失败.我一般采用两种解决方案: 1.采用nginx进行转发,是前后端服务处于同一个域下面,从根本上避免跨域问题 ...
- AJAX请求中出现OPTIONS请求
背景 有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求 ...
- 记一次 CORS 跨域请求出现 OPTIONS 请求的问题及解决方法
今天前后端在联调接口的时候,发生了跨域请求资源获取不到的问题. 首先说明下跨域问题的由来.引自HTTP 访问控制 的一段话: 当 Web 资源请求由其它域名或端口提供的资源时,会发起跨域 HTTP 请 ...
- OPTIONS 请求引发的分析
阅读提纲: 为什么会出现 OPTIONS 请求? 什么情况下会出现 OPTIONS 请求? OPTIONS 请求会发送什么内容? 跨域前端访问后端时,所有的 Ajax HTTP 请求都会先发送一个 O ...
- Network出现两次相同请求?
出现的状况 Network中出现了两个相同的请求(如图),两个发起了同样的请求,花的时间却不同,一个55ms,一个花了294ms. 两个相同的请求 什么情况啊?研究了一番,我发现有一个地方是不同的 ...
- problem:为什么会有options请求
为了安全考虑,浏览器对资源访问有同源限制的问题,也就是web应用程序只能访问和它同一协议同一域名同一端口的web应用程序上的资源. 通过跨域资源共享机制可以让资源在浏览器中访问与该资源本身不同域的资源 ...
随机推荐
- AtCoder Regular Contest 078D
两边bfs,先一边找到从1到n的路径并记录下来,然后挨个标记,最后一边bfs找1能到达的点,比较一下就行了 #include<map> #include<set> #inclu ...
- HDU 1693 插头dp入门详解
放题目链接 https://vjudge.net/problem/22021/origin 给出一个n*m的01矩阵,1可走0不可通过,要求走过的路可以形成一个环且可以有多个环出现,问有多少不同的 ...
- Maven 中的dependencies与dependencyManagement的区别
1.dependencyManagement 在Maven中dependencyManagement的作用其实相当于一个对所依赖jar包进行版本管理的管理器 在pom.xml文件中,jar的版本判断的 ...
- mysql 5.1.71升级到5.6.30
mysql 5.1.71升级到5.6.30 mysqldump -h主机名 -P端口 -u用户名 -p密码 (–database) 数据库名 > 文件名.sql 备份MySQL数据库的命令 my ...
- C++复制控制:赋值操作符和析构函数
一.赋值操作符 类定义了该类型对象赋值时会发生什么.与拷贝构造函数一样,如果类没有定义自己的赋值操作符,编译器会合成一个. 1.重载操作符的简单介绍 重载操作符是一些函数,其名字为operator后跟 ...
- NAT&Port Forwarding&Port Triggering
NAT Nat,网络地址转换协议.主要功能是实现局域网内的本地主机与外网通信. 在连接外网时,内部Ip地址需要转换为网关(一般为路由器Ip地址)(端口号也需要相应的转换) 如: ...
- cpu的用户态和内核态和内存的用户空间内核空间
谈到CPU的这两个工作状态,也就是处理器的这两个工作状态,那我们有必要说一下为什么搞出这两个鬼玩意出来. 用过电脑的娃娃们肯定知道在一个系统中既有操作系统的程序,也由普通用户的程序.但那么 ...
- 现代前端技术解析:Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
- 开源一款资源分享与下载工具 —— 电驴(eMule)
这里分享一款资源分享与下载工具--电驴,其实严格来说,应该叫电骡,这是我维护的版本,eMuleVeryCD版本,VeryCD是一个不错的资源分享网站:http://www.verycd.com/.大概 ...
- [置顶]
记最近一次Nodejs全栈开发经历
背景: 前段时间大部门下新成立了一个推广百度OCR.文字识别.图像识别等科技能力在金融领域应用的子部门.因为部门刚成立,基础设施和人力都是欠缺的.当时分到我们部门的任务是抽调一个人做新部门主站前端开发 ...