总结一些跨域的方式

shiyang6017 发布于2019-08-19 17:12 / 1498人阅读

摘要：可能平时最常用到的就是方式的跨域，可以用提供的。接口链接回调原页面上函数处理返回结果让结果跳转到域跨域原理定义一种跨域访问的机制，可以让实现跨域访问。允许一个域上的网络应用向另一个域提交跨域请求。

1、可能平时最常用到的就是get方式的jsonp跨域，可以用jquery提供的$.ajax 、$.getJSON。

$.ajax({
    url:"接口地址",
    type:"GET",
    data:"想给接口传的数据",
    dataType:"jsonp",
    success:function(ret){
        console.log(ret);
    }
});

这样很简单的就可以实现jsonp的跨域，获取接口返回值。

想更多的了解$.ajax可以参考下面的链接，里面有很详细的介绍：链接描述

2、post方式的form表单跨域。

a.com html:

a.com callback.php:
";
//回调原页面上函数处理返回结果
echo "window.top.postcallback(" .$_GET["data"]. ");";
echo "";

b.com api.php:


3、CORS跨域
原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
注：移动终端上，除了opera Mini都支持。
利用 CORS，http://www.b.com 只需添加一个标头，就可以允许来自 http://www.a.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
header("Access-Control-Allow-Origin:*");
也可以设置指定域名：
header("Access-Control-Allow-Origin:http://www.b.com");
js部分：
$.ajax({
    url: a_cross_domain_url,
    crossDomain: true,
    method: "POST"
});
CORS比较适合应用在传送信息量较大以及移动端来使用。
4、script标签来跨域

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        // callback在此处执行
        js.onload = js.onreadystatechange = null;
    }
};
5、h5的postMessage
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中的代码：


6、子域跨域（document.domain+iframe）
www.a.com上的a.html

document.domain = "a.com";
var ifr = document.createElement("iframe");
ifr.src = "http://script.a.com/b.html";
ifr.style.display = "none";
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
script.a.com上的b.html

document.domain = "a.com";
具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = "a.com"；然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况。

云服务器 GPU云服务器 vps日常维护中的一些要点总结跨域请求方式 linux域的创建如何更改整个域的时间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78293.html

总结跨域的几种方式

摘要：比如域的页面通过嵌入了一个域的页面，可以通过以下方法实现和的通信通过跨域以上几种都是双向通信的，即两个，页面与或是页面与页面之间的，下面说几种单项跨域的一般用来获取数据，因为通过标签引入的是不受同源策略的限制的。跨域整理@(前端笔记) 跨域只要协议、域名、端口有任何一个不同，都被当作是不同的域。由于浏览器的同源策略，其限制之一是不能通过ajax的方法情趣请求不同源的文档。第二个限制...

diabloneo 2019-08-21 17:52 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

Yang_River 2019-08-01 17:27 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

honmaple 2019-08-20 18:52 评论0 收藏0
前端跨域总结

摘要：通过跨域通过引入的不受同源策略的限制，所以我们可以通过标签引入一个或者是一个其他后缀形式如，等的文件，此文件返回一个函数的调用。 1.跨域的定义只要协议、域名、端口有任何一个不同，就会被当做为不同的域，如果从A域名访问B域名上的资源就叫做跨域。下面我们来看下几种跨域的方法： 2.document.domain 浏览器的同源策略有一些限制，第一，不能通过ajax方法去请求不同源的资源...

caiyongji 2019-07-25 15:02 评论0 收藏0
javascript中实现跨域的方式总结

摘要：中的跨域请求应该也算是一个重点，具体什么叫跨域，在这里我就不展开了，可以查一下浏览器的同源策略和跨域的定义。再看后台文件文件接收回调函数并把要返回的参数以参数注入的方式注入到回调函数中，再返回给客户端。 js中的跨域请求应该也算是一个重点，具体什么叫跨域，在这里我就不展开了，可以查一下浏览器的同源策略和跨域的定义。原来只知道常用的jsonp和document.domain这两种方式，这...

VioletJack 2019-08-20 14:39 评论0 收藏0