关于WebAPI跨域踩到的一点坑

最近在尝试前后端分离的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.