首页> 前端开发> 跨域,你慌了么?

[文章]跨域,你慌了么?

收藏
0 593 0

前些日子在项目中,遇到跨域的问题,于是查了一下几种解决办法,在这里做个小结。

 

什么是跨域

 

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。

同源策略限制了一下行为:

  • CookieLocalStorage IndexDB 无法读取
  • DOM JS 对象无法获取
  • Ajax请求发送不出去

 

 

常见的跨域场景

 

所谓的同源是指,域名、协议、端口均为相同。

 

http://www.aa.cn/index.html 调用 http://www.aa.cn/server.php 非跨域

 

http://www.aa.cn/index.html 调用 http://www.bb.cn/server.php 跨域,主域不同

 

http://dd.aa.cn/index.html 调用 http://dd.bb.cn/server.php 跨域,子域名不同

 

http://www.aa.cn:8080/index.html 调用 http://www.aa.cn/server.php 跨域,端口不同

 

https://www.aa.cn/index.html 调用 http://www.aa.cn/server.php 跨域,协议不同

 

localhost 调用 127.0.0.1 跨域

 

 

跨域的解决办法

 

jsonp跨域

jsonp跨域其实也是JavaScript设计模式中的一种代理模式。在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的,所以我们可以通过这个漏洞来进行跨域。一般,我们可以动态的创建script标签,再去请求一个带参网址来实现跨域通信

 

//原生的实现方式

let script = document.createElement('script');

script.src = 'http://www.aa.cn/login?username=Nealyang&callback=callback';

document.body.appendChild(script);

function callback(res) {

  console.log(res);

}

当然,jquery也支持jsonp的实现方式

$.ajax({

    url:'http://www.aa.cn/login',

    type:'GET',

    dataType:'jsonp',//请求方式为jsonp

    jsonpCallback:'callback',

    data:{

        "username":"Nealyang"

    }

})

jsonpCallback 方法定义一个回调函数。必须保证接口返回数据数据封装在此函数中,才能获取返回数据。

虽然这种方式非常好用,但是一个最大的缺陷是,只能够实现get请求。并且如果是跨别人的系统,在不改接口的情况下,依然是无法获取到返回数据的。

 

document.domain + iframe 跨域

 

这种跨域的方式最主要的是要求主域名相同。什么是主域名相同呢?

www.aa.cn aaa.aa.cn ba.ad.aa.cn 这三个主域名都是aa.cn,而主域名不同的就不能用此方法。

 

假设目前a.aa.cn b.aa.cn 分别对应指向不同ip的服务器。

 

a.aa.cn 下有一个test.html文件

 

 

利用 iframe 加载 其他域下的文件(aa.cn/1.html, 同时 document.domain 设置成 aa.cn ,当 iframe 加载完毕后就可以获取 aa.cn 域下的全局对象,

此时尝试着去请求 nealyang.cn 域名下的 test.json (此时可以请求接口),就会发现数据请

数据请求失败,目的没有达到,自然是还少一步:

 


此时在进行刷新浏览器,就会发现数据这次真的是成功了

 

以上就是我所在项目中遇到的跨域问题和解决办法。

当然还有其他的解决办法,并没有多做研究。

以下列出其他几种解决办法,感兴趣的同学可以研究研究

1.     window.name + iframe 跨域

2.     location.hash + iframe 跨域

3.     postMessage跨域

4.     跨域资源共享 CORS

5.     WebSocket协议跨域

 

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}