一、跨域问题产生的原因:同源策略(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请求的正确处理。

  <system.webServer>
<handlers> <!--此处处理options请求。或去iis里面删除、添加上动作添加上OPTIONS-->
<remove name="OPTIONSVerbHandler" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers> </system.webServer>

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,也是不能跨域的。

WebApi2跨域问题的更多相关文章

  1. WebApi2跨域问题及解决办法

    跨域问题产生的原因 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议, ...

  2. angularjs+webapi2 跨域Basic 认证授权(二)

    在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...

  3. angularjs+webapi2 跨域Basic 认证授权(一)

    如今的app,利用各种前端框架结合html5的混合开发模式已然盛极一时.其中ionic+angularjs更是如日中天.这种模式利用angularjs $http 请求数据api 以达到前后端分离深得 ...

  4. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  5. WebAPI跨域处理

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

  6. WebApi2 jsonp跨域问题

    一:故事背景     以前在写WebApi2的时候,一直是用作前后端分离(WebApi2 +angularjs),可是最近自己在给WebApp写接口的时候遇到了很多坑,总结一下就是跨域问题.而跨域问题 ...

  7. ASP.NET WebAPI2复杂请求跨域设置

    ASP.Net Core的跨域设置比较简单  官方都整合了 具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cor ...

  8. 关于WebService、WebApi的跨域问题

    随着移动互联网的发展, 传统营销模式往网站以及移动客户端转移已经成为一种趋势.接触过互联网开发的开发者肯定会很熟悉两种网络服务WebApi.WebService.在使用JavaScript进行数据交互 ...

  9. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

随机推荐

  1. 十一个行为模式之观察者模式(Observer Pattern)

    定义: 定义对象之间一种一对多的关系,当被观察者状态变化时,可以自动地通知观察者并执行相关的业务操作.观察者模式又被称为发布-订阅模式等. 结构图: Subject:抽象主题类,定义了所有被观察类的通 ...

  2. [Cordova] Plugin开发架构

    [Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要 ...

  3. 分享20款移动开发中很有用的 jQuery 插件

    今天,很显然每个网站都需要有一个移动优化的界面以提高移动用户的使用体验.在开发任何移动项目时,要尽可能保持每一种资源尺寸都尽可能的小,以给最终用户提供一个好的体验是非常重要的.在这篇文章中我们已经编制 ...

  4. 前端可视化开发-livereload

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...

  5. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  6. ajax大全

    简介 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 传统的web应用简单的操作需要加载全局 ...

  7. 2-1 git合并 打tag

    tag常用命令(仅供参考): git tag -a V1.4 -m "1.4" 创建一个tag git tag 查看本地tag git tag -d V1.1  删除本地tag g ...

  8. iOS tableView右滑显示选择

    如何使用UITableViewRowAction实现右滑选择呢? 1.在iOS8以前,我们实现tableview中滑动显示删除,置顶,更多等等的按钮时,都需要自己去实现,在iOS8中系统已经写好了,只 ...

  9. Android源码中内置包含so文件的APK文件

    方法一: 在packages/apps下面以需要预置的APK名字创建文件夹,以预置一个名为Test的APK为例 将Test.apk放到packages/apps/Test下面 在packages/ap ...

  10. 【代码笔记】iOS-获得设备型号

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...