post跨域请求问题

场景

昨天在项目开发中，遇到一个奇怪的问题：

使用fetch发送一个请求，并指定请求的方式method 为 POST代码如下：

var request = new Request(APIList.savePage, {        method: 'POST',         mode: 'cors',         headers: new Headers({                  'Content-Type': 'application/json'        })    });    fetch(request)    .then(response => response.json())    .then(result =>{      debugger    })  }

使用postman调试接口的时候是正常的，但是使用如上代码发送请求的时候，却遇到403错误，提示请求方式不允许：

从上图中可以看到，请求方式上赫然写着OPTIONS , 这是什么意思？

原因及方案

W3C规范中指出，网络请求分为简单请求和复杂请求：

• 简单请求：get和部分post，post时content-type属于application/x-www-form-urlencoded，multipart/form-data，text/plain中的一种
• 复杂请求：简单请求之外的请求

复杂请求发出之前，就会出现一次options请求。

第一次OPTIONS 空数据请求,为了获取是否允许跨域,第二次才是带数据请求。在这种情况下，即便是服务器允许程序跨域访问，若不支持 options请求，请求也会死掉。

对应的处理方案就是：在服务端添加OPTIONS 请求支持，并做好跨域处理

OPTIONS

OPTIONS请求方法的主要用途有两个：

1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。

2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。

for more infomation

Reference

http://stackoverflow.com/questions/17333013/jquery-ajax-post-request-throws-405-method-not-allowed-on-restful-wcf

http://blog.csdn.net/gavin_luo/article/details/44855627

http://stackoverflow.com/questions/12320467/jquery-cors-content-type-options