HTML5解决跨域问题

由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互。而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名、ip等),端口号。

但是随着开放,共享平台的流行,跨域访问的需求愈加强烈。目前最常用的跨域方案是动态加入script标签,这多少有点hack的意味,跨域访问似乎一直没有什么安全且光明正大的办法。

终于,HTML5提供的XMLHttpRequest Level2实现了跨域访问以及其他的一些新功能。下面我们会详细讨论一下:

XMLHttpRequest  Level2

XHR2是HTML5新特性中的一个(事实上没有什么XHR1,XHR2这样的概念,XHR2只是HTML5提供的一套新的规范),在原有XHR对象上新增了一些功能:跨域访问,全新的事件,还有请求进度以及响应进度。

目前浏览器对于XHR2的兼容列表:

  • u Chrome              2.0以上
  • u Firefox              3.5以上
  • u Internet Explorer      不支持
  • u Opera               不支持
  • u Safari               4.0以上

原理:

正常情况下,我们书写一个XHR示例:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://baidu.com', true); //访问baidu.com

xhr.send(null);

我们本地使用Chrome运行这段代码,打开控制台查看错误信息:

图1

在这里可以看到,本次请求已经被Kill掉。这是因为,我们的页面在本地,域是http://127.0.0.1,与请求的http://baidu.com非同源。

那么本次请求是何时被Kill的呢,是在发出前被浏览器确认为跨域请求而被立即终止了吗?事实上,浏览器不仅发出了请求,还接收到了响应。然后根据响应头的规则来确定这个域是否同源可以接收,如果不可以,浏览器就会报错,接收到的数据也不会提供给脚本。

我们回到XHR2,上面提到,XHR对象新增了一些功能,这里就包括跨域访问。实现如下:

//在服务器端返回内容的页面,设置Header Access-Control-Allow-Origin如下

Response.AddHeader("Access-Control-Allow-Origin","*") ;

这里,我们先不讨论设置的含义,先让代码跑起来,查看结果如何。

页面http://inno.hotpotpro.com/FirePot/meetingdate?date=20120723已经完成如上配置,修改JS代码如下:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://inno.hotpotpro.com/FirePot/meetingdate?date=20120723', true); //访问baidu.com

xhr.send();

刷新页面,查看控制台,没有报错。打开控制台的“Network”选型卡:

图2

可以看到红线标识的部分:Access-Control-Allow-Origin:*,即为我们在服务器端所做的设置。切换到“Response”选项卡:

图3

可以看到服务器返回的内容,如此,我们完成了跨域访问。

这是怎么做到的呢?

浏览器在接收到服务器返回信息时,会检查响应头的Access-Control-Allow-Origin,它的值标识请求内容所允许的域。

我们之前要求服务器设置Access-Control-Allow-Origin为*,表明该返回信息允许所有源访问。如果设置为具体的域,如http://niweisuo.com,就表明除了同源外,只允许域来自niweisuo.com的访问。

注:

在使用AJAX类库时,可能经过如上的设置,依然无法通过浏览器的安全限制。那么,可以检查一下AJAX类库的代码,看是否存在影响跨域设置的代码:

图4

如上是tangram-ajax-1.5.2.js中,影响跨域的代码,注释调即可,其他类库请自调。

注:本篇文章参考了《Ajax跨域访问》的内容,部分与之相同,如有侵权,请与我联系。

http://www.cnblogs.com/plums/archive/2012/07/31/2616355.html

HTML5解决跨域问题的更多相关文章

  1. html5中的postMessage解决跨域问题

    解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...

  2. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  3. HTML5中Access-Control-Allow-Origin解决跨域问题

    www.111cn.net 更新:2015-01-07 编辑:flyfox 来源:转载 跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Acc ...

  4. HTML5下通过response header解决跨域AJAX cookie的问题

    ajax: 通过给Response Header添加Access-Control-Allow-Origin:*  来解决跨域请求,*代表允许所有的跨域请求,或者把*换成指定的域名 cookie: 服务 ...

  5. 使用Access-Control-Allow-Origin解决跨域

    什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...

  6. 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

    什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的 ...

  7. [转] js前端解决跨域问题的8种方案(最新最全)

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  8. Django后端彻底解决跨域问题

    最近在接一个前后端分离的项目,后端使用的django-restframework,前端使用的Vue.后端跑起来后,发现前端在访问后端API时出了了跨域的问题. 类似如下报错: 关于跨域问题,之前这篇文 ...

  9. 外部调用mvc的api方法时,如何解决跨域请求问题?

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

随机推荐

  1. JUnit4 笔记

    1. JUnit4基础 JUnit4 与 JUnit3不同的是,不需要继承测试类,而是通过JDK5提供的注解去标识测试方法. 常用的注解如下: @Before:初始化方法 对于每一个测试方法都要执行一 ...

  2. MySQL解压版安装配置详解

    MySQL解压版安装起来比较简单,步骤相对较少.下面我们就来详细介绍一下如何在windows操作系统上安装解压班的MySQL. 1.下载解压版MySQL,地址:http://downloads.mys ...

  3. 当使用VS CODE 时,如果窗口中打开的文件无法识别HTML的话,可以使用以下方法添加要识别的文件类型

    找到该文件并修改\Microsoft VS Code\resources\app\extensions\html\package.json{ "name": "html& ...

  4. c#中的重写方法与隐藏方

    1.父类中有方法a,添加virtua修饰符可声明为虚方法,在子类中可以用override声明后重写方法a. 2.父类中有方法a,在子类中可以有new修饰符声明后隐藏父类方法. 子类重写方法后,对于子类 ...

  5. 如何在windows server 2008的桌面上显示 我的电脑

    装完windows server2008 r2 x64后发现桌面只有一个回收站图标,这一点和xp 20003都差不多,但是xp 2003很容易就把桌面上的 我的电脑 我的文档 网上邻居找到,但是win ...

  6. linux 学习一

    linux 命令 ls -al ls -l cal

  7. 九度OJ 1081 递推数列 -- 矩阵二分乘法

    题目地址:http://ac.jobdu.com/problem.php?pid=1081 题目描述: 给定a0,a1,以及an=p*a(n-1) + q*a(n-2)中的p,q.这里n >= ...

  8. C# 利用TextBox的Text属性实现换行加字符 "\r\n"

    要让一个TextBox显示多行文本就得把它的Multiline属性设置为true,可是如果你是要把TextBox的Text属性设置多行文本时,换行符由两个字符组成:"\r\n". ...

  9. SQL Server中count(*), count(col), count(1)的对比

    让我们先看一下BOL里面对count(*)以及count(col)的说明: COUNT(*) 返回组中的项数.包括 NULL 值和重复项. COUNT(ALL expression) 对组中的每一行都 ...

  10. 23种设计模式全解析 (java版本)

    转自:http://blog.csdn.net/longyulu/article/details/9159589 其中PHP常用的五种设计模式分别为:工厂模式,单例模式,观察者模式,策略模式,命令模式 ...