关于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.
引用https://www.cnblogs.com/baiyunchen/p/5769884.html
关于WebAPI跨域踩到的一点坑的更多相关文章
- C#进阶系列——WebApi 跨域问题解决方案:CORS
前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. WebApi系列文章 C#进阶系列— ...
- WebApi 跨域问题解决方案:CORS
注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看W ...
- C#进阶系列——WebApi 跨域问题解决方案:CORS(转载)
C#进阶系列——WebApi 跨域问题解决方案:CORS 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2.场景测试 四.总结 正文 前言:上篇总结了下W ...
- asp.net—WebApi跨域
一.什么是跨域? 定义:是指浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制. 同源策略限制了以下行为: 1.Cookie.LocalStora ...
- WebAPI跨域处理
原文来自:http://www.cnblogs.com/heifengwll/p/6243374.html WebApi2跨域问题 一.跨域问题产生的原因:同源策略(Same origin pol ...
- SNF快速开发平台MVC-EasyUI3.9之-WebApi跨域处理方案
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案:目前采用we ...
- (转)C# WebApi 跨域问题解决方案:CORS
原文地址:http://www.cnblogs.com/landeanfen/p/5177176.html 阅读目录 一.跨域问题的由来 二.跨域问题解决原理 三.跨域问题解决细节 1.场景描述 2. ...
- sql的行转列(PIVOT)与列转行(UNPIVOT) webapi 跨域问题 Dapper 链式查询 扩展 T4 代码生成 Demo (抽奖程序)
sql的行转列(PIVOT)与列转行(UNPIVOT) 在做数据统计的时候,行转列,列转行是经常碰到的问题.case when方式太麻烦了,而且可扩展性不强,可以使用 PIVOT,UNPIVOT比 ...
- 连表查询都用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%我不知道在 ...
随机推荐
- PIL PNG格式通道问题的解决方法
近来研究图片的剪切拼接,用到PIL,在打开PNG格式保存为JPEG格式的图片发现报错: import os from PIL import Image im = Image.open(r'E:\wor ...
- CSS【06】:CSS显示模式
div和Span标签 作用:一般用于配合css完成网页的基本布局 <style> .header{ width: 980px; height: 100px; background: red ...
- [转载]Black-Scholes 模型中 d1,d2 是怎么得到的?如何理解 Black-Scholes 模型?
https://www.optbbs.com/thread-253244-1-1.html
- C# ToLookup
下文参考翻译自: C#/.NET Little Wonders: The ToLookup() LINQ Extension Method 故事的背景 让我们先来创建一个简单的类来表示产品,产品有ID ...
- eclipse中svn上传及更新
- Foxmail7.2新建的文件夹不见了
Foxmail在客户端上,新建了几个文件夹,并把相应的邮件都都选择了“总是把**邮件转移到”这个选项. 今天早上打开电脑一看,所有的邮件连同对应的文件夹都找不到了 Foxmail中没显示因为默认是隐藏 ...
- legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法)
legend2---开发日志10(ajax请求的方法是否同样会执行base控制器里面的方法) 一.总结 一句话总结:会执行的,所以写base控制器里面的方法要注意,base控制器里面的方法要以查数据为 ...
- sql语句查询结果合并union all用法
整理别人的sql 大概的思想是用union 和union all --合并重复行select * from Aunion select * from B --不合并重复行select * from A ...
- MapServer Configuring with IIS
MapServer Configuring with IIS 一.前言 1.MapServer简介 MapServer是一个用C语言编写的开源地理数据呈现引擎.除了浏览地理信息系统数据之外,MapSe ...
- day12_python_1124
00 如何学习python 如何学好英语? 母系英语. 听 说 读 写 练 input output 听 说 读 写(练) 听,读 说 纠正 01 昨日内容回顾 生成器:本质就是迭代器,自己用pyth ...