最近在尝试前后端分离的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. 提取路由器固件中的squashfs

    之前用binwalk -Me提取固件中的squashfs,但会生成大量的压缩包等,只提取文件系统的话,可以定位squashfs的文件头(hsqs)位置,然后用dd将它分离出来,然后在unsquashf ...

  2. Linux相关代码

    Linux ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ---- ...

  3. Android活动和碎片的生命周期及addToBackStack()方法

    开始学了Android活动的生命周期后又到了碎片的生命周期,就开始有点乱了.又看了一些总结的文章有一个挺详细的:https://blog.csdn.net/lecepin/article/detail ...

  4. Python入门 模块

    module 模块 atestmodule.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- 'a test module' def addFunc( ...

  5. TASE2017

    PATTERN系列之五 I. Introduction To ease the expression of real-time requirements, Dwyer, and then Konrad ...

  6. JavaScript(数组、Date、正则)

    数组 创建数组 // 一.自变量创建数组 // 1-通过字面量创建一个空数组 var arr1 = []; console.log(arr1) console.log(typeof arr1); // ...

  7. 三 drf 认证,权限,限流,过滤,排序,分页,异常处理,接口文档,集xadmin的使用

    因为接下来的功能中需要使用到登陆功能,所以我们使用django内置admin站点并创建一个管理员. python manage.py createsuperuser 创建管理员以后,访问admin站点 ...

  8. spring 事务的七中传播行为五中隔离

    事务的传播行为(七): public enum Propagation { REQUIRED(TransactionDefinition.PROPAGATION_REQUIRED), SUPPORTS ...

  9. Tomcat配置服务和自启动

    Tomcat配置服务和自启动1.Tomcat配置服务 假设Tomcat的安装路径为/usr/local/tomcat 1 为Tomcat添加启动参数 catalina.sh在执行的时候会调用同级路径下 ...

  10. POJ 1088 滑雪(模板题 DFS+记忆化)

    Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道 ...