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

A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题。之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com)。

URL 说明 是否允许通信
http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.jshttp://www.a.com/b.js 同一域名,不同端口 不允许
http://www.a.com/a.jshttps://www.a.com/b.js 同一域名,不同协议 不允许
http://www.a.com/a.jshttp://170.32.82.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.jshttp://script.a.com/b.js 同一域名,不同二级域名 不允许
http://www.a.com/a.jshttp://a.com/b.js 二级域名和一级域名 不允许(cookie这种情况下也不允许访问)
http://www.b.com/a.jshttp://www.a.com/b.js 不同域名 不允许

对于是否允许跨域,更详细的说明可以看下表:

有了对跨域的基本概念了解后,就可直接进入这篇文章的主题了。

赞助商链接
解决方法:

若在接收请求的服务端abc.com/B页面用的是php语言,则在页面中加入:

// 指定可信任的域名来接收响应信息,推荐
<?php  header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或加入

// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐
<?php header('Access-Control-Allow-Origin:*'); ?>
就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!

用chrome调试工具Network ajax请求查看面板中可以看到,类似如下截图:cors

需要注意的是:

添加响应头responese headers时,允许跨域请求的域名带不带斜杠/还是有区别的,带斜杠/会报错:
XMLHttpRequest cannot load  abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' that is not equal to the supplied origin. Origin 'http://A.abc.org' is therefore not allowed access.

header('Access-Control-Allow-Origin:*');是html5新增的一项标准功能,因此 IE10以下 版本的浏览器是不支持 的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie的计划夭折,最终还得回归JSONP(目前主流的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。)

跨域解决后,如果还要操作Cookie,还得继续补增响应头:

<?php  header('Access-Control-Allow-Credentials:true'); ?>
需要将 XMLHttpRequest 对象的 withCredentials 属性设置为 true,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:

$.ajax({
url:"B.abc.com",
xhrFields:{
withCredentials:true
},
crossDomain:true
});
哦也~ 收到 Cookie 了。

设置 withCredentials 为 true 的请求中会包含 A.abc.com端的所有Cookie,这些Cookie仍然遵循同源策略,所以,你只能访问其中和 abc.com/B同根域的Cookie,而无法访问其他域的Cookie。

Access-Control-Allow-Origin实则是html5 Cross-Origin Resource Sharing实现的最重要的一点参数配置。
Cross-Origin Resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。

附:

禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求:
chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security,重启浏览器即可

时间: 2024-10-27 07:52:38

HTML5中Access-Control-Allow-Origin解决跨域问题的相关文章

HTML5中postMessage 消息传输与 POST 跨域通信

postMessage 支持实现跨文档消息传输(Cross Document Messaging),并且可跨域传输信息.Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4 以上版本浏览器都已支持 postMessage. 1. postMessage 功能简介 postMessage 主要包含两个 API: 1).消息监听:onmessage 2).消息发送:postMessage 使用步骤也很简单: 1.1.监听发送过来的消息

java中使用Cookie替代Session解决跨域Session失效问题

分布式系统中,各个子域名跨域访问的时候,会出现session失效问题,导致登录失败. 例如:用户在www.111cn.net 上登录成功了.但是切换到他的个性化域名 mb.111cn.net 上的时候session失效. 怎么办? 可以采用session复制方案,比如nfs session共享,membercache session存储,还有使用terracotta也可以. 采取以上方案都可以,但是上述方案会导致开发环境过于复杂,运维环境也过于复杂,而且session跨网络传输响应速度会减慢.

js中利用JSONP解决跨域问题

什么是跨域? 简单的来说,出于安全方面的考虑,javascript不能访问其他服务器上的内容,即"同源策略"(参考1,参考2).跨域就是通过某种手段绕过同源策略去访问不同服务器上的内容.只要域名.端口.协议任何一个不同,就是不同的域.协议或端口不同只能通过后端来解决. URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/

js前端解决跨域问题的8种方案(最新最全)_javascript技巧

1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.j

Python框架Django解决跨域API调用问题

前几天,在做质量度量平台时(Python框架Django开发),跨域调用的问题,我前面有一个做法是,在本地server中增加一个API,这个API的功能是远程请求一个API并解析数据,这样浏览器访问本系统时只需要调用同域名下新增加的这个API即可,不存在跨域问题.不过,这次我想直接在AngularJS中调用跨域的远程API. 解决跨域问题,有两个方法:1.使用jsonp 2.使CORS生效 使用jsonp方法,需要让服务器端放回jsonp格式的response,如Django可以加jsonp相关

window.name解决跨域数据传输问题

原文:http://research.microsoft.com/~helenw/papers/subspace.pdf window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:<Session variables without cookies>),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输

在liferay中用serveResource解决跨域访问问题

简介: 众所周知,跨域问题是十分常见的需求,比如让客户端的ext-js控件可以渲染来自服务器端的json对象.我们可以用很多很多方法来解决,比如jsonP.但是,在liferay中,我们可以用serveResource方法来优雅的解决跨域访问问题. 白板分析: 以下是摘自我在技术讨论会上的白板: 解决方法: 首先编写一段serveResource方法,让其和远端的json对象打交道,它作为中间层可以封装来在远程的json资源,然后提供给本域内的ext-js代码来渲染. 当然了,这里我们的资源必须

html2canvas截图如何解决跨域的问题?

问题描述 html2canvas截图如何解决跨域的问题? 1.问题描述 如果不跨域的话,截图正常. 如果有跨域的图片,那么js报错,报错信息如下: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 2.代码 /** * 截图 */ function doScreenShot(){ html2canvas(docume

AngularJs解决跨域问题案例详解(简单方法)_AngularJS

首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛. 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还

纯前端解决跨域问题

背景 跨域是由浏览器的同源策略引起的,是指页面请求的url地址,必须与浏览器上的url地址处于同域上(即域名,端口,协议相同). 这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施的出发点是好的,但是程序页面开发的过程中,却常常给前端开发者带来麻烦. 由于前端开发过程中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利调用服务的端口. 解决跨