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

引用https://www.cnblogs.com/baiyunchen/p/5769884.html

关于WebAPI跨域踩到的一点坑的更多相关文章

  1. C#进阶系列——WebApi 跨域问题解决方案:CORS

    前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...

  2. WebApi 跨域问题解决方案:CORS

    注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...

  3. C#进阶系列——WebApi 跨域问题解决方案:CORS(转载)

    C#进阶系列——WebApi 跨域问题解决方案:CORS   阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...

  4. asp.net—WebApi跨域

    一.什么是跨域? 定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制. 同源策略限制了以下行为: 1.Cookie.LocalStora ...

  5. WebAPI跨域处理

    原文来自:http://www.cnblogs.com/heifengwll/p/6243374.html WebApi2跨域问题   一.跨域问题产生的原因:同源策略(Same origin pol ...

  6. SNF快速开发平台MVC-EasyUI3.9之-WebApi跨域处理方案

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案:目前采用we ...

  7. (转)C# WebApi 跨域问题解决方案:CORS

    原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2. ...

  8. sql的行转列(PIVOT)与列转行(UNPIVOT) webapi 跨域问题 Dapper 链式查询 扩展 T4 代码生成 Demo (抽奖程序)

    sql的行转列(PIVOT)与列转行(UNPIVOT)   在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比 ...

  9. 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式

    连表查询都用Left Join吧   最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在 ...

随机推荐

  1. PIL PNG格式通道问题的解决方法

    近来研究图片的剪切拼接,用到PIL,在打开PNG格式保存为JPEG格式的图片发现报错: import os from PIL import Image im = Image.open(r'E:\wor ...

  2. CSS【06】:CSS显示模式

    div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...

  3. [转载]Black-Scholes 模型中 d1,d2 是怎么得到的?如何理解 Black-Scholes 模型?

    https://www.optbbs.com/thread-253244-1-1.html

  4. C# ToLookup

    下文参考翻译自: C#/.NET Little Wonders: The ToLookup() LINQ Extension Method 故事的背景 让我们先来创建一个简单的类来表示产品,产品有ID ...

  5. eclipse中svn上传及更新

  6. Foxmail7.2新建的文件夹不见了

    Foxmail在客户端上,新建了几个文件夹,并把相应的邮件都都选择了“总是把**邮件转移到”这个选项. 今天早上打开电脑一看,所有的邮件连同对应的文件夹都找不到了 Foxmail中没显示因为默认是隐藏 ...

  7. legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法)

    legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法) 一.总结 一句话总结:会执行的,所以写base控制器里面的方法要注意,base控制器里面的方法要以查数据为 ...

  8. sql语句查询结果合并union all用法

    整理别人的sql 大概的思想是用union 和union all --合并重复行select * from Aunion select * from B --不合并重复行select * from A ...

  9. MapServer Configuring with IIS

    MapServer Configuring with IIS 一.前言 1.MapServer简介 MapServer是一个用C语言编写的开源地理数据呈现引擎.除了浏览地理信息系统数据之外,MapSe ...

  10. day12_python_1124

    00 如何学习python 如何学好英语? 母系英语. 听 说 读 写 练 input output 听 说 读 写(练) 听,读 说 纠正 01 昨日内容回顾 生成器:本质就是迭代器,自己用pyth ...