0

0

如何使用javascript实现跨域?总结javascript跨域的几种方式

伊谢尔伦

伊谢尔伦

发布时间:2017-06-02 10:12:03

|

2055人浏览过

|

来源于php中文网

原创

从域说起

域: 域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”,这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域。在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系。当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享
域树:域树由多个域组成,这些域共享同一表结构和配置,形成一个连续的名字空间。树中的域通过信任关系连接起来,活动目录包含一个或多个域树。域树中的域是通过双向可传递信任关系连接在一起。由于这些信任关系是双向的而且是可传递的,因此在域树或树林中新创建的域可以立即与域树或树林中每个其他的域建立信任关系。这些信任关系允许单一登录过程,在域树或树林中的所有域上对用户进行身份验证,但这不一定意味着经过身份验证的用户在域树的所有域中都拥有相同的权利和权限。因为域是安全界限,所以必须在每个域的基础上为用户指派相应的权利和权限。
域树中的域层次越深级别越低,一个“.”代表一个层次。
如域zhidao.baidu.com(百度知道)就比 baidu.com(百度)这个域级别低,因为它有两个层次关系,而baidu.com只有一个层次。

何为跨域

默认情况下,,XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是,实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。
只要协议、域名、端口有任何一个不同,都被当作是不同的域,对于端口和协议的不同,只能通过后台来解决。我们要解决的是域名不同的问题

如何跨域

立即学习Java免费学习笔记(深入)”;

(一) CORS(Cross-Origin Resource Sharing,跨源资源共享)

1.CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C 的一个工作草案,定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS 背后的基本思想,就是使用自定义的HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
2.实现此功能非常简单,只需由服务器发送一个响应标头即可。

浏览器支持情况:

  • IE 8+

  • Firefox 3.5+

  • Opera 12+

  • Safari 4+

  • Chrome 3+

假设我们页面或者应用已在 a.com上了,而我们打算从b.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回错误。
利用 CORS,b.com 只需添加一个标头,就可以允许来自.a.com 的请求。
下面是用php进行的设置,“*”号表示允许任何域向我们的服务端提交请求:

header{"Access-Control-Allow-Origin: *"}

CORS的兼容性写法

 function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://example.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }

(二) JSONP(JSON with Padding 填充式JSON 或参数式JSON)

在js中,我们虽然不能直接用XMLHttpRequest请求不同域上的数据时,但是在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

例如:


首先第一个script便签定义了一个处理数据的函数;
然后第二个script标签载入一个js文件,data.php 是数据所在地址,但是因为是当做js来引入的,所以data.php 返回的必须是一个能执行的js文件;最后js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以php应该是这样的

最终,输出结果为:dosomething(['a','b','c']);
从上面可以看出jsonp是需要服务器端的页面进行相应的配合的。

JSONP的优缺点
优点:

它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;
能够直接访问响应文本,支持在浏览器与服务器之间双向通信
缺点:

Runway Green Screen
Runway Green Screen

Runway 平台的AI视频工具,绿幕抠除、视频生成、动态捕捉等

下载

JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP 调用之外,没有办法追究。因此在使用不是你自己运维的Web 服务时,一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

这里有三个页面:

a.com/app.html:应用页面。
a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下。
b.com/data.html:应用页面需要获取数据的页面,可称为数据页面。

app.html


data.html

iframe首先的地址是b.com/data.html,所以能取到window.name数据;
但是iframe现在跟app.html并不同源,app.html无法获取到数据,所以又将iframe的链接跳转至a.com/proxy.html这个代理页面,现在app.html跟iframe就同源了。

注意:iframe由b.com/data.html跳转到a.com/proxy.html页面,window.name的value是不变的

获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)

(四) document.domain + iframe

对于主域相同而子域不同的例子,可以通过设置document.domain的办法来解决。
具体的做法是可以在a.com/a.html 和script.a.com/b.html 两个文件中分别设置document.domain = 'a.com',然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。
a.com/a.html页面


script.a.com/b.html页面

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲,window.postMessage是一个跨域的无服务器垫片的Ajax。

用法:
otherWindow.postMessage(message, targetOrigin);

  • otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.+open的返回值;通过name或下标从window.frames取到的值。

  • message: 所要发送的数据,string类型。

  • targetOrigin: 用于限制otherWindow,“*”表示不作限制

数据发送端a.com/index.html中的代码:


数据接收端b.com/index.html中的代码:

相关专题

更多
高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

4

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

3

2026.01.16

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

10

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

15

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

42

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

7

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

9

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

6

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号