关于options请求的一点理解

最近最项目改造，对所有的ajax请求统一做了一点处理，发现原来很正经的ajax请求突然不正常了，每个ajax之前都多了一个相应的method为options的请求。虽然之前知道ajax的请求中method有这个，但是一直没怎么去了解过，这次复盘做个小的学习总计吧~

什么是options请求？为什么会有options请求？

首先还是看一下官方或者比较官方的定义：

HTTP 的 OPTIONS 方法用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为“*”）使用该方法。 --MDN WEB DOCS

同时options请求具备以下特性：

选项	是否允许	备注
Request has body	No	没有请求体
Successful response has body	No	成功的响应有响应体
Safe	Yes	安全
Idempotent	Yes	密等性，不变性，同一个接口请求多少次都一样
Cacheable	No	不能缓存
Allowed in HTML forms	No	不能在表单里使用

简言之，options请求是用于请求服务器对于某些接口等资源的支持情况的，包括各种请求方法、头部的支持情况，仅作查询使用。来个栗子，

->>> curl -X OPTIONS https://xxxx.com/micro/share/getShareRecord -iHTTP/1.1 200 OK
Server: nginx/1.13.3
Date: Mon, 30 Jul 2018 12:50:08 GMT
Content-Length: 0
Connection: keep-alive
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
X-Frame-Options: SAMEORIGIN
Access-Control-Allow-Origin: 0
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Requested-With

通过curl来发送一个http请求，在响应头中可以发现服务器上这个接口对请求方法以及一些header的使用允许情况，也就是上面说的获取服务器对于某些资源的选项、支持情况。
而除了这些，options和其他http请求还有什么不同么？答案是有的

浏览器级行为

这个概念听着有点耳生，嗯是我自己这么说的。。。我们可以把浏览器自主发起的行为称之为“浏览器级行为”。之所以说options是一种浏览器级行为，是因为在某些情况下，普通的get或者post请求回首先自动发起一次options请求，当options请求成功返回后，真正的ajax请求才会再次发起。

再来看下这个“某些情况下”都是什么情况？

1、跨域请求，非跨域请求不会出现options请求
2、自定义请求头
3、请求头中的content-type是application/x-www-form-urlencoded，multipart/form-data，text/plain之外的格式

当满足条件12或者13的时候，简单的ajax请求就会出现options请求，有没有感觉到一点同源策略的意思，个人理解这个就是浏览器底层对于同源策略的一个具体实现。首先得到服务器端的确认，才能继续下一步的操作，这也是为什么options请求也被叫做“预检”请求的原因吧。

出现之后怎么处理？服务端怎么响应这个？

这个基本思路就是server端在接收到请求的时候，先去判断下是不是options请求，判断下来源，没问题的时候返回个200之类的成功就可以了。不过由于没做个具体的demo之类的，这个就不细说了。

如何解决出现AXIOS的Request header field Content-Type

沉迷学习中关注0人评论2346人阅读2018-08-08 21:59:50

问题描述：

由于restful接口需要在头部header传递两个字段：

Content-Type: application/json
Access-Token: 84c6635800b14e0eba4f7ece65e095a1

但是，在vue.js里面配置：

执行发送的时候出现：

意思是预发请求的时候不通过，不再正式发请求

经过反复的测试，发现，header里面包含自定义字段，浏览器是会先发一次options请求，如果请求通过，则继续发送正式的post请求，而如果不通过则返回以上错误

那这样就只能在服务端配置options的请求返回，代码如下：

  // TODO 支持跨域访问response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");response.setHeader("Access-Control-Expose-Headers", "*");        if (request.getMethod().equals("OPTIONS")) {HttpUtil.setResponse(response, HttpStatus.OK.value(), null);            return;}

上面代码需要加入允许的头部，content-type和access-token，并且判断请求的方法是options的时候，返回ok（200）给客户端，这样才能继续发正式的post请求。

修改之后成功发了post请求。

什么是options请求？为什么会有options请求？相关推荐

为什么post请求前先发一个options 请求？
不仅仅是fetch,只要你满足以下几种情况,都会去发起一个 Preflighted requests,也就是options请求,参见上面链接. It uses methods other than G ...
H5请求服务端发送POST请求之预请求-OPTIONS
1.问题场景 1.1 H5端请求服务端接口时,需要在header中携带服务端用jwt规范生成的token 1.2 在接收到H5的请求时Filter需要从请求头中拿出token做校验,检查当前的toke ...
linux禁用options方法,WEB服务器启用OPTIONS方法汇总大全
HTTP方法是在Web服务器上启用.选择的方法提供了一个清单,由Web服务器支持的方法,这是一个关于通信选项的请求URI标识的请求/响应链信息的请求.危害: 选项方法可能会暴露敏感信息,可能有助于恶意 ...
php 请求方式,PHP发起HTTP请求有哪几种方式？
PHP发起HTTP请求方式有:1.通过[file_get_contents]发送get请求:2.通过[CURL]发送get请求:3.通过[fsocket]发送get请求. PHP发起HTTP请求方式有 ...
前端cookie 放到请求头_ajax请求携带cookie和自定义请求头header（跨域和同域）
错误: 1.ajax请求时是不会自动带上cookie的,要是想让他带上的话,必须设置withCredential为true. 正确: 1.ajax同域请求下,ajax会自动带上同源的cookie: 2 ...
http 请求与其同步与异步请求的通透讲解
http请求可以是基于webkit的浏览器或者web组件如:webview(在移动平台,android iOS等)发送的:也可以是任何程序或者代码段发出的:也可以这么说任何程序都可以自主发送http. ...
uniapp网络请求封装；小程序请求接口封装；uni.request接口封装
另一篇全面封装文章资源文章下载地址 1.正常使用uni.request()发送请求(未封装) get() {uni.request({url: 'http://192.168.1.191/abc// ...
python中的请求方法_Python爬虫HTPP请求方法有哪些
HTTP请求方法 GET:请求指定的页面信息,并返回实体主体. HEAD:类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头 POST:向指定资源提交数据进行处理请求(例如提交表单或者上 ...
axios请求发送两次请求_vue使用axios发送请求，都会发送两次请求
vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...
HTTP请求方式中8种请求方法（简单介绍）
HTTP请求方式中8种请求方法(简单介绍) 简单介绍 HTTP是超文本传输协议,其定义了客户端与服务器端之间文本传输的规范.HTTP默认使用80端口,这个端口指的是服务端的端口,而客户端使用的端口是动 ...

什么是options请求？为什么会有options请求？

关于options请求的一点理解

什么是options请求？为什么会有options请求？

浏览器级行为

出现之后怎么处理？服务端怎么响应这个？

如何解决出现AXIOS的Request header field Content-Type

什么是options请求？为什么会有options请求？相关推荐

最新文章

热门文章