最近在尝试前后端分离的WebAPI+AngularJS方案，在率先处理授权的时候，踩到了一点WebAPI跨域的坑，其实严格意义上来说也不算是坑吧，只是我自己对WebAPI不熟悉而已，这里我与大家分享一下。
先说一下我这边遇到的情况：
我是在做登录功能，使用的是微软的OWin提供的组件来实现
对于WebAPI跨域，你如果去百度或者谷歌，基本上会有以下两种答案：
一、在Web.config增加配置
在Web.config中system.webServer节点下面，增加配置项，设置输出的http header,类似于如下代码，主要是httpProtocol中的代码：
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>
</system.webServer>
在Web.config中增加相应配置之后，发现虽然header中会有相应的跨域需要的header,但是每次我请求token的post请求都会自动变成options请求最终导致400失败，而且F12查看浏览器没有报关于跨域失败的错误。
二、使用Microsoft.AspNet.WebApi.Cors进行跨域
这是网上的第二种，也是最多的一种方案，引用这个类库，然后在WebApiConfig.cs中Register方法中进行注册，大概代码如下：
var cors = new EnableCorsAttribute("*", "*", "*");
GlobalConfiguration.Configuration.EnableCors(cors);
就这两行，然后我把Web.config中的代码拿掉，只加这个的时候，浏览器端response回来的根本就没有了跨域的header，再次宣布失败~
三、最终的解决方案
经过我多方找资料，发现好像根本不是WebAPI的跨域问题，而是OWin他本身有跨域问题需要解决，即使你Web.API支持了跨域，那Owin也不认（OWin好屌，一个组件竟然不认全局配置）。那找到了原因方法就好找了，我找到了微软还有一个类库，叫Microsoft.Owin.Cors，引用之后，在Startup中的Configuration方法里面启用授权的时候，调用一下 app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);方法。
加上之后，我直接使用angularJS向后端POST一个Json对象，类似于如下：
var loginData = {
username: ‘admin‘,
password: ‘‘,
client_id: systemSetting.clientId,
client_secret: systemSetting.clientSecret,
grant_type: ‘code‘
};
发现请求成功了，但是授权却失败了，他告诉我说grant_type不受支持，但是我确定我的这个参数传递的没有任何问题，经过一番查阅资料，发现需要把这个改成类似于URL传递参数的形式（原因未查明）：
var requestData="grant_type=password&username=" + loginData.username + "&password=" + loginData.password;
经过如上一番折腾，终于可以在客户端正确获取token.