原文来自:http://www.cnblogs.com/heifengwll/p/6243374.html

WebApi2跨域问题

 

一、跨域问题产生的原因:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能。

现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指,域名,协议,端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,
即检查是否同源,只有和百度同源的脚本才会被执行。
由于同源策略的限制,JavaScript就产生了跨域的问题。
参考:同源策略
 
二、在WebApi2中的解决方法。
环境:vs2013,entity framework 6.0
后端项目:webApi 2
前端项目:
提交ajax时候用的类型:application/json
1、在nuget中搜索cors,安装

2、在文件WebApiConfig.cs中配置跨域设置

3、因为前端提交ajax请求,用的类型是application/json。发送post请求前会先发送一个预请求,就是option请求。

要在Web.config中配置下处理option请求,让后端能够正确的响应option请求,前端才会继续发送post请求。

这两个处理程序会影响option请求的正确处理。


 <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>

1、默认的配置:

var cors = new EnableCorsAttribute("*", "*", "*");

config.EnableCors(cors);

这样设置可以实现简单请求的跨域,

但是非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。options请求。

触发options请求的条件:

1、非GET 、POST请求

  2、POST请求的content-type不是常规的三个:application/x- www-form-urlencoded(使用 HTTP 的 POST 方法提交的表单)、multipart/form-data(同上,但主要用于表单提交时伴随文件上传的场合)、text/plain(纯文本)

  3、POST请求的payload为text/html

  4、设置自定义头部

但是不能实现非简单请求的跨域。

还需要在web.config中<system.webServer>下添加

<handlers>

<remove name="ExtensionlessUrlHandler-Integrated-4.0" />

<remove name="OPTIONSVerbHandler" />

<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

注意 :

var cors = new EnableCorsAttribute("10.116.56.69:90", "*", "*");

是不行的 ,要写http://10.116.56.69:90

注意:如果写http://localhost:90  ,那浏览器访问的时候也要访问 http://localhost:90,如果访问http://10.116.56.69:90,也是不能跨域的。

原文来自:http://www.cnblogs.com/heifengwll/p/6243374.html

本人遇到的坑:

坑一:  托管模式 设置为了 经典模式 此时是无法生效工作的    调成集成模式下就好了 (应该是经典模式下 web.config有差别的原因)

坑二:在Global的Application_Start中必须先注册 API路由 再注册 MVC路由  顺序不能颠倒 ,否则不生效

protected void Application_Start()
{

// 必须先注册WebAPI路由 再注册MVC路由 否则 WebAPICors 不生效
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
}

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跨域踩到的一点坑

    最近在尝试前后端分离的WebAPI+AngularJS方案,在率先处理授权的时候,踩到了一点WebAPI跨域的坑,其实严格意义上来说也不算是坑吧,只是我自己对WebAPI不熟悉而已,这里我与大家分享一 ...

  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. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  2. children和childNodes 的区别

    1.childNodes 属性,标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==时才是元素节点,是属性节 ...

  3. Angular生成二维码

    Installation - Angular 5+, Ionic NPM npm install angularx-qrcode --save Yarn yarn add angularx-qrcod ...

  4. 一对一 只需将另一个表的id设置为主键和外键即可

    一对一 只需将另一个表的id设置为主键和外键即可 

  5. 【Linux】Centos6.8下一键安装Lnmp/Lamp环境

    [下载一键安装软件包] 百度云地址:https://pan.baidu.com/s/1TZqGKtE-46gxW96Ptfp4gA 网址:https://lnmp.org/ [步骤] 通过第三方远程工 ...

  6. Trailing Zeroes (III) LightOJ - 1138(二分)

    You task is to find minimal natural number N, so that N! contains exactly Q zeroes on the trail in d ...

  7. day29 __eq__ 比较

    本质上 "==" 调用的内部方法就是 __eq__() 正常情况下,两个名字相同的变量比较的是内存地址,内存地址当然是不一样的可以使用__eq__来改变成名字相同就相等 1 cla ...

  8. day26 多继承

    class A(object): def test(self): print('from A') class B(A): def test(self): print('from B') class C ...

  9. 自学工业控制网络之路1.3-典型的现场总线介绍FF

    返回 自学工业控制网络之路 自学工业控制网络之路1.3-典型的现场总线介绍FF 1994年6月,ISP和WORLDFIP合并成立现场总线基金会FF.1998年,FF基金会开发了HSE 10/100Mb ...

  10. Codeforces 382 D Permutations

    题目大意: 给出一张二分图,这张二分图完美匹配的个数是奇数,求删掉第$i(1<=i<=m)$条边后完美匹配个数的奇偶性. 设这张图的邻接矩阵为$A$,那么完美匹配的个数为$A$的积和式,即 ...