初步了解关于js跨域问题

js跨域问题是指在js在不同的域中进行数据传输或者数据通信，比如通过ajax向不同的域请求数据（说到ajax，不可避免的就会遇到两个问题：一是ajax是如何传递数据的？二是ajax是如何实现跨域的？），或者是js获取在页面内的不同域的框架中的数据（iframe），ifame在不同域下的js通信。

跨域的表现主要有：协议不同，主机名不同，端口号不同

比如

http://www.abc.com和https://www.abc.com属于协议不同

http://www.abc.com和http://qqq.abc.com属于主机名不同

http://www.abc.com和http://www.abc.com:80属于端口号不同

而http://www.abc.com和http://www.abc.com/list.html是属于同域下的

第一种解决跨域问题的方法是：通过jsonp

在js中，我们直接通过XMLHttpRequest请求不同域的数据是不可以的，jsonp通过引入js脚本的方式解决了这个问题，比如假设需要在a.html中通过ajax获取不同域上的json数据，假设这个json数据就在http://www.abc.com/data.php,那么可以通过以js文件的形式引入

a.html

function dosomething(jsondata) {

//这里处理获得的json数据

}

</script>

这里的获取数据的地址后还有callback参数是惯用参数名，因为是当做js文件引入的，那么返回的也应该是js文件，所以在这个页面的php中应该是这样的

<?php

　　$callback = $_GET('callback');//得到回调函数名

　　$data = array('a','b','c');//传递的数据

　　echo $callback.'('.json_encode($data).')';//输出

输出：dosomething(['a','b','c'])

因此我们可以很清楚地知道，dosomething函数就是通过http://www.abc.com/data.php?callback=dosomething返回的js文件，dosomething函数的参数是返回的json数据，这样我们就得到了跨域的数据

所以通过jsonp的方法解决跨域问题的思路是，通过script标签引入一个js文件，这个js文件载入成功后会执行url参数中指定的函数，并且会把获取的json数据当做参数传入，所以jsonp是需要服务器端页面的配合的。

jQuery可以很方便地封装jsonp

　$.getJSON("http://www.abc.com/data.php?callback=?",function(){

　　//处理JSON数据

});

</script>

jquery会自动生成一个全局函数来代替callback=?的？,与js实现的原理是一致的，之后获取到数据后，全局函数又会自动销毁，相当于一个临时代理函数的功能，

$getJSON方法可以自动判断是否跨域，如果不跨域，则按普通的ajax方法，如果跨域，就通过异步加载调用js文件来调用jsonp的回调函数。

二、document.domain

这个方法说到底就是将两个域设置成相同的域名，比如，可以把http://www.a.com和http://a.com设成相同的域名即可，但是这个设置是有条件限制的，document.domain只能设置成自身或更高一级的父域，比如b.c.a.com可以设成、b.c.a.com、c.a.com、a.com都是可以的，但是设成d.b.c.a.com是不可以的，因为这是b.c.a.com的子域，同样，设成d.com也是不可以的，因为已经是不同域了。

而且document.domain只适用于不同的子域之间的框架间的交互，如果要通过ajax方法进行跨域获取数据的话，可以在本页面设置一个隐藏的iframe来进行代理，将ifame载入跟需要获取数据的那个页面相同的域的页面，然后通过iframe获取数据，而js也可以正常的操作这个iframe，再通过document.domain方法去获取iframe里的数据就可以了。

举个例子：

在http://a.html里设置主域，

　　document.domain="a.html";//设置成主域

　　function test(){

　　　　alert("document.getElementById('iframe').contentWindow");

　　}

</script>

<body>

//载入需要获取页面的数据

</body>

转载于:https://www.cnblogs.com/zhangyanjie/p/6619160.html

初步了解关于js跨域问题相关推荐

chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持
Atitit.js跨域解决方案attilax大总结后台java php c#.net的CORS支持 1.设置 document.domain为一致推荐1 2.Apache 反向代理推荐1 3. ...
window.opener方法的使用 js跨域
2019独角兽企业重金招聘Python工程师标准>>> 最近公司网站登陆加入了第三方登陆.可以用QQ直接登陆到我们网站,在login页面A中点QQ登陆时,调用了一个window.op ...
js跨域访问，No 'Access-Control-Allow-Origin' header is present on the requested resource
js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...
解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
5种处理js跨域问题方法汇总（转载）
1.JSONP跨域GET请求 ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那 ...
firefox如何载入json文件_如何去解决JS跨域问题怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
js php调用webservice,js跨域调用WebService的使用方法
这次给大家带来js跨域调用WebService的使用方法,js跨域调用WebService的注意事项有哪些,下面就是实战案例,一起来看一下. 步骤1. 在web.config中的system.web节 ...

初步了解关于js跨域问题

初步了解关于js跨域问题相关推荐

最新文章

热门文章