跨域的几种方案

1. 跨域

1.1什么是跨域？

域下的文档或脚本试图去请求另一个域下的资源。

1.2为什么跨不过去？

由于浏览器的同源策略（域名、协议、端口均相同即为同源），浏览器不能执行其他网站的脚本。

https://github.com/index.html 调用  
https://github.com/server.php  非跨域

http://github.com/index.html 
调用   http://gitee.com/server.php 
跨域,主域不同

http://abc.github.com/index.html 
调用   http://def.github.com/server.php 
跨域,子域名不同

http://localhost:8080/index.html 调用  
http://localhost:5000/server.php  跨域,端口不同

https://localhost:8080index.html 调用  
http://localhost:5000/server.php  跨域,协议不同

localhost   调用 127.0.0.1 跨域

1.3跨域原理

通过各种方式，避开浏览器对JavaScript实施的安全限制（同源策略）。

2.跨域的方法

2.1 JSONP

2.1.1 实现原理

利用script 标签 src 属性中的链接可以访问跨域的 js 脚本的特性。
去创建一个script标签，script的src属性设置接口地址，接口参数必须要带一个自定义函数名，后台通过定义函数名去接受返回的数据。

2.1.2 实现代码

//原生的实现方式

//动态创建 script
let script = document.createElement('script');

// 设置回调函数
function getData(data) {
   
    console.log(data);
}
//设置 script 的 src 属性，并设置请求地址
script.src = 'https://so.csdn.net/so/search?q=%E8%B7%A8%E5%9F%9F&t=blog&u=CathyleeQ';

// 让 script 生效
document.body.appendChild(script);

2.1.3缺点

只支持GET方式的请求

2.2 document.domain + iframe跨域

2.2.1 实现原理

两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

2.2.2 实现代码

主窗口

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

副窗口

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

2.2.3 缺点

仅限主域相同，子域不同的跨域应用场景。

2.3 window.name

2.3.1 实现原理

利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name。通过iframe的src属性由外域转向本地域，