跨域的几种解决方法

最新推荐文章于 2024-04-04 08:21:11 发布

大zheng

最新推荐文章于 2024-04-04 08:21:11 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： javascript jsonp

本文链接：https://blog.youkuaiyun.com/zhengzebinhao/article/details/73441085

web前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了跨域的概念及其解决方法，包括JSONP、CORS、document.domain等技术手段，并对比了它们的特点与适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域是指只要协议、域名、端口有任何一个不同，都被当作是不同的域，不同域之间的访问就叫跨域。

URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

跨域的解决方法：

1、jsonp

动态插入script标签，通过script标签引入js文件，js文件成功载入后会执行URL指定的函数，并把需要的json数据作为参数传入。

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

这种方式的优点是简单易用，而且兼容性好，但仅支持GET请求方式。

2、CORS 跨域资源共享

服务器对CORS的支持主要是通过“Access-Control-Allow-Origin”进行，浏览器检测到相应的设置就允许采用ajax请求。

这种方式的好处的是支持所有类型的http请求，可以使用普通的XMLHttpRequest方式请求数据。

3、document.domain跨子域

一个页面中嵌套iframe，页面是无法直接调用iframe内的方法，不同框架之间是可以获取window对象，但无法获得相应的属性和方法。

在主域相同的情况下，这个时候使用document.domain，只要两个页面的document.domain指向同一个域名。就可以实现不同子域之间的交互。

<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
        //dosomething
    }
</script>

4、window.name

window对象有个name属性，在一个窗口的生命周期内，该窗口的载入的所有页面都共享一个window.name，同时每个页面对window.name都有读写的权限，可以利用window.name进行跨域访问。

5、html5引进的window.postMessage

利用window.postMessage(message,targetOrigin)向window对象发送消息，无论这个对象是否是同源的。

总结：从使用上，window.name是使用起来最简单，同时也能兼顾大部分浏览器的跨域使用方法；