post跨域请求问题

2/10/2017来源:心得技巧人气:1037

场景

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

使用fetch发送一个请求,并指定请求的方式methodPOST代码如下:

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