三十、JS几种跨域方法和原理

最新推荐文章于 2021-03-11 08:41:54 发布

蕙惠子

最新推荐文章于 2021-03-11 08:41:54 发布

阅读量214

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80670291

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

Ps:浏览器的同源策略:其限制之一就是不能通过ajax的方法请求不同源中的文档。限制二是浏览器中不同域的框架之间不能进行js的交互操作。
一、什么是跨域？
1.JS跨域是指通过js在不同的域之间进行数据传输或通信，如Ajax向一个不同的域请求数据，或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，即为不同的域；
Eg:网址是 http://baidu.com:8080?user=name&pwd=password
http:// 协议
baidu.com 域名(注意：www.baidu.com不是域名)
8080 端口
user=name&pwd=password 地址带的参数
2.在Js中直接使用XMLHttpRequest(Ajax)请求不同域上的数据，是不能实现的；
Eg:相对http://store.company.com/dir/page.html同源检测的结果：

一、通过jsonp跨域

1.在js中，可以在页面上引入不同域上的js脚本文件，jsonp利用这个特性实现跨域。简单来说，请求的文件只要含有“src”,“href”这些属性，就能在A服务器上请求所需的文件，然后在B服务器上运行,实现跨域。

举例：

index.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设json数据地址是http://example.com/data.php则index.html代码为：

<script>
    function gaindata(jsondata){
        //处理获得的json数据
    }
</script>
//jsonp跨域
<script src="http://example.com/data.php?callback=gaindata"></script>

跨域原理：这里的json数据是被当做js文件通过script标签引入的，（http://example.com/data.php返回的必须是一个能执行的js文件），这个js文件载入成功后会执行url参数中指定的gaindata函数，并且会将json数据作为参数传入函数中。

PHP代码：

<?php
  $callback=$_GET[callback];//获取回调函数callback
  $data=array("a","b","c");//设置要返回的数据
  echo $callback."(".json_encode($data).")";//输出数据

2. 通过jsonp跨域原理，可以用js动态生成script标签进行跨域操作。若页面使用jquery，那么通过其封装的方法很方便的进行jsonp操作。

原理一样，只是jquery会自动生成一个全局函数替换callback=？中的问号，之后获取到的数据又会自动销毁，即是一个临时函数的作用。$getJSON方法会自动判断是否跨域，不跨域，就调用普通的ajax方法，跨域，则会以异步加载js文件的形式来调用jsonp的回调函数。

二、CORS原理跨域

1.JSONP原理，其不足就是只能使用GET提交，若传输的数据量大，这个JSONP方式就使用不了了，相对JSONP，CORS支持POST提交，并且实施起来灰常简单

2.原理：CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS原理只需要向响应头header中注入Access-Control-Allow-Origin：*（*指任意域），页面进行正常的ajax请求即可，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。

3.常见后端解决跨域方案：

(1)php后台配置：

第一步:配置Php 后台允许跨域

<?php header('Access-Control-Allow-Origin: *');

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

//主要为跨域CORS配置的两大基本信息,Origin和headers

第二步:配置Apache web服务器跨域(httpd.conf中)

原始代码：

AllowOverride none

Require all denied

</Directory>

修改代码：

Options FollowSymLinks

AllowOverride none

Order deny,allow

Allow from all

</Directory>

(2)JAVA后台配置

第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)

第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:

<groupId>com.thetransactioncompany</groupId>

<artifactId>cors-filter</artifactId>

<version>[ version ]</version>

</dependency>

例如：

/* 2.CORS跨域允许浏览器向跨源服务器发送XMLHttpRequest请求*/
    //2-1 通过配置php后台允许跨域
    //header('Access-Control-Allow-Origin:*');
    //header('Access-Control-Allow-Headers:Origin,X-Requested-With,Content-Type,Accept')
    //主要配置Origin和headers
    var ajax=new XMLHttpRequest();
    ajax.open("get","http://localhost:80/ajax0609/php/data2.php");
    ajax.send();
    ajax.onreadystatechange=function (){
        if(ajax.readyState==4&&ajax.status==200)
        {
            console.log(ajax.response);
        }
    }
</script>

PHP后端配置：

<?php
      header('Access-Control-Allow-Origin: *');
      $callback=$_GET[callback];
      $data=array("a","b","c");
      echo $callback."(".json_encode($data).")";
      ?>

三、通过修改document.domain来跨子域

1.不同的框架之间(父子或同辈)，是能够获取到彼此的window对象的，但不能使用获取到的window对象的属性和方法(除h5的postMessage方法)

2.document.domain方法就是将两个界面的document.domain都设置为相同的域名就可以。但是只能设置自身或更高一级的父域，且主域必须相同。且这个方法只适用于不同子域的框架间的交互。

例如：a.b.example.com、b.example.com、example.com中任意一个，但不可以设置成c.a.b.example.com，baidu.com；

a.html界面：