WEBAPI利用System.Web.Http.Cors开启OPTION,以达到符合先导请求(Preflighted requests)设定自定义Header

摘要:WEBAPI利用System.Web.Http.Cors开启OPTION,以达到跨网域设定自定义Header


其实本篇只是小弟日前所遇到的小问题.

在此做个记事.

写的不好或是有误的地方也请各位前辈多多指导

由于目前小弟的开发环境中,

需要与WEB API 做介接,

所以都会碰到跨网域请求的需求,

例如api.xxxx.com,api2.xxxx.com

但就单以纯粹传送数据至API来说,

SERVER端的API只需要
Access-Control-Allow-Origin

设定指定的网域也或者*号全部接受

如下图

这样Client端就能透过Simple requests(简易请求)取回数据,

但问题来了,如果说我需要使用客制化的header呢?

当然小弟较为笨拙认为照原样送就好了!

如下图

结果就是冏了!!

如下图

出现了405 OPTION Method Not Allowed

当然翻了一下解决方式!

其实很简单只需要透过System.Web.Http.Cors在允许的动词命令(methods)中加上OPTION就可以正常了

如下图

至于更详细的使用方式请参考

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

不过还是有一点点小小疑问,

为什么在送客制化header的时候,

会自动送出OPTION的请求?

参考了一下mozilla MDN  HTTP access control (CORS) 这篇文章中

晃然大悟,也就是在此做个分享

跟上述一开始所说的Simple requests(简易请求),

在未送任何自定义的header,会自动采取(简易请求),

但如果是跨网域中你需要传送自定义的heade那么就会采用Preflighted requests(预检/先导请求)

由于跨站请求可能会携带使用者数据,所以必须先进行像Server端提出请求先导请求

这时候就会透过XHR第一次送出你想要自定义的header像Server端提出请求(WEB API),

就是采用OPTION

如果成功在Response Header中就会回复允许自定义的header格式

Access-Control-Allow-Headers: test-a,test-b

如下图

接下来第二次的请求才是真正的将值接收回来,并确定将自定义的header送出

如下图

在此处放上范例程序:请点我

参考连结

Remote Debugging Devices

Enabling Cross-Origin Requests in ASP.NET Web API 2