关于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);方法。
![](/qrcode.jpg)
加上之后,我直接使用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.