在当前项目中,前端通过POST方式访问后端的REST接口时,发现两条请求记录,一条请求的Request Method为Options,另一条请求的Reuest Method为Post。想要解决这个疑惑还得从以下3个概念说起。

Http Options Method

RFC2616标准(现行的HTTP/1.1)中如下描述:

简而言之,OPTIONS请求方法的主要用途有两个:

1、获取服务器支持的HTTP请求方法;

2、用来检查服务器的性能。

CORS(跨域资源共享)

CORS是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。

使用CORS的方式非常简单,但是需要同时对前端和服务器端做相应处理。

1、  前端

客户端使用XmlHttpRequest发起Ajax请求,当前绝大部分浏览器已经支持CORS方式,且主流浏览器均提供了对跨域资源共享的支持。

2、  服务器端

如果服务器端未做任何配置,则前端发起Ajax请求后,会得到CORS Access Deny,即跨域访问被拒绝。

对于C#做如下配置可允许资源的跨域访问:

<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type" />
<add name="Access-Control-Allow-Methods" value="PUT,GET,POST,DELETE,OPTIONS"/>
</customHeaders>
</httpProtocol>
</system.webServer>

对于nodejs做如下配置可允许资源的跨域访问:

//设置CORS跨域访问
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With, accept, origin, content-type");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

Access-Control-Allow-Origin:*表示允许任何域发起请求,如果只允许特定的域访问,则设置Access-Control-Allow-Origin:xxx为具体域名即可。

Preflighted Requests(预检请求)

Preflighted Requests是CORS中一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头,其目的就是为了判断实际发送的请求是否是安全的。

下面的2种情况需要进行预检:

1、  简单请求,比如使用Content-Type 为 application/xml 或 text/xml 的 POST 请求;

2、中设置自定义头,比如 X-JSON、X-MENGXIANHUI 等。

了解完这3个概念,其实答案已经了然了。

参考:

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

http://blog.csdn.net/hfahe/article/details/7730944

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

一个Option请求引发的深度解析的更多相关文章

  1. 浏览器何时发送一个Option请求

    Http Options Method 简而言之,OPTIONS请求方法的主要用途有两个: 1.获取服务器支持的HTTP请求方法: 2.用来检查服务器的性能. CORS(跨域资源共享) CORS是一种 ...

  2. 源码深度解析SpringMvc请求运行机制(转)

    源码深度解析SpringMvc请求运行机制 本文依赖的是springmvc4.0.5.RELEASE,通过源码深度解析了解springMvc的请求运行机制.通过源码我们可以知道从客户端发送一个URL请 ...

  3. 记录我开发工作中遇到HTTP跨域和OPTION请求的一个坑

    我通过这篇文章把今天工作中遇到的HTTP跨域和OPTION请求的一个坑记录下来. 场景是我需要在部署在域名a的Web应用里用JavaScript去消费一个部署在域名b的服务器上的服务.域名b上的服务也 ...

  4. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  5. 深度解析VC中的消息(转发)

    http://blog.csdn.net/chenlycly/article/details/7586067 这篇转发的文章总结的比较好,但是没有告诉我为什么ON_MESSAGE的返回值必须是LRES ...

  6. Kafka深度解析

    本文转发自Jason’s Blog,原文链接 http://www.jasongj.com/2015/01/02/Kafka深度解析 背景介绍 Kafka简介 Kafka是一种分布式的,基于发布/订阅 ...

  7. 深度解析Java8 – AbstractQueuedSynchronizer的实现分析(上)

    本文首发在infoQ :www.infoq.com/cn/articles/jdk1.8-abstractqueuedsynchronizer 前言: Java中的FutureTask作为可异步执行任 ...

  8. Google物联网操作系统协同框架Weave深度解析

    1.       Google Weave框架 在2015年的Google I/O大会上,负责Android业务的桑达.皮查伊(SundarPichai)宣布了Google最新的物联网战略.这包括一个 ...

  9. Kakfa揭秘 Day4 Kafka中分区深度解析

    Kakfa揭秘 Day4 Kafka中分区深度解析 今天主要谈Kafka中的分区数和consumer中的并行度.从使用Kafka的角度说,这些都是至关重要的. 分区原则 Partition代表一个to ...

随机推荐

  1. MSSQL Server Transaction 数据库事务回滚的用法

    使用的表结构如下:         Commit TransAction    Else        Rollback TransAction/*    自定义一个变量来判断最后是否发生过错误.*/ ...

  2. .net框架版本说明

    .NET框架 1.0..NET框架 1.1..NET框架 2.0..NET框架 3.0..NET框架 3.5..NET框架 4.00 .netframework3.0Windows Presentat ...

  3. linux常见驱动修改

    =============================== 说明 ===============================本文以A5为例,举8种我们公司常用接口的极度精简的驱动程序,只宜参考 ...

  4. 使chrome支持跨域访问

    在做后台开发的时候,使用了iframe框架.后台主页面如下: <div style="width:185px; overflow: hidden;" id="wes ...

  5. Face++云相册应用IOS源码

    该源码是一个不错的相册应用,Face++云相册应用源码,以人脸识别作为用户注册和登录的依据,登录后可以进入用户的云相册空间,并对相册进行上传图片或删除图片,另添加了分享功能. <ignore_j ...

  6. nginx + php +mysql (适配thinkphp)

    Nginx 单机配置 http://tengine.taobao.org/book/index.html (taobao book) http://ubuntuhandbook.org/index.p ...

  7. Winform主窗体的设置

    软件必然涉及到一个主窗体MainForm,下面介绍一下几个简单的属性设置,可能比较有用 (1)icon,当然是咱们软件的图标了,设置上去即可 (2)isMdiContainer,这个比较重要了哦,必须 ...

  8. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  9. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  10. LVS+keepalived实现负载均衡

    背景:         随着你的网站业务量的增长你网站的服务器压力越来越大?需要负载均衡方案!商业的硬件如F5又太贵,你们又是创业型互联公司如何有效节约成本,节省不必要 的浪费?同时实现商业硬件一样的 ...