前端实现跨域的几种方法

最新推荐文章于 2024-05-08 09:15:00 发布

qq_39192629

最新推荐文章于 2024-05-08 09:15:00 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端跨域的写法文章标签：跨域的几种方式

本文链接：https://blog.youkuaiyun.com/qq_39192629/article/details/89029069

前端跨域的写法专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端开发中遇到的跨域问题及其原因——同源政策。为了克服这一限制，文章列举了四种方法：1) 利用window+哈希值+iframe实现数据传递；2) 使用window.name+iframe进行跨域通信；3) 借助HTML5的window.postMessage API；4) AJAX的jsonp、cors和WebSocket通信方式。这些方法帮助开发者在不同源之间安全地共享数据。

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

为什么会有跨域？那必须得说同源政策，同源指的是三个同源：1，协议相同，域名相同，端口相同，例如http://y.localhost.com:7001/public/3.html；这些网址协议是http://域名是y.localhost.com:，端口号是7001，在这三个都相同的话就是同源
同源：http://y.localhost.com:7001/public/5.html，
同域不同端口http://y.localhost.com:7002/public/3.html，
协议不同https://y.localhost.com:7001/public/3.html
域不同http://x.localhost.com:7001/public/3.html,
不同源的网址不能不可以共享cookie，LocalStorage ，dom也无法获取，ajax不能发送，防止了恶意的网站窃取数据，保证了用户信息的安全，所以同源政策是必须的，
但是也给开发人员带来了不便。那解决同源政策有这几种方法：
1.window+哈希值+iframe
http://y.localhost.com:7001/public/1.html页面的js：

var iframe = document.createElement('iframe')
iframe.src = 'http://x.localhost.com:7001/public/hash.html'
document.body.appendChild(iframe)

window.onhashchange = function() {
    // 当哈希值改变时会执行此方法

    console.log(location.hash)
}

http://x.localhost.com:7001/public/1.html 页面的js

setTimeout(() => {

    parent.location.href = `http://y.localhost.com:7001/public/3.html#msg=123`;
}, 500);

原理是通过iframe的子页面通过异步获取数据，然后将数据绑定在哈希值上面，利用parent.location.href来给不同域名的父级添加哈希值，但是网址改变哈希值时并不会刷新页面，并且可以监听哈希值变化来获取子页面传来的值
2.window.name+iframe
http://y.localhost.com:7001/public/2.html页面的js：

var iframe = document.createElement('iframe')
iframe.src = 'http://x.localhost.com:7001/public/name.html'//不同域名的网址
document.body.appendChild(iframe)
iframe.onload = function() {
    console.log(iframe.contentWindow.name)
}

http://x.localhost.com:7001/public/2.html页面的js：

setTimeout(() => {
            window.name = "abc";
            location.href = 'http://y.localhost.com:7001/public/index.html'  //一个空的页面用来传name值
        }, 1);

原理：利用window.name有一个特性，只要是在同一个窗口，前一个网页设置name后面一个网页也能读取到name，因此可以利用iframe跨域的子页面通过请求完异步之后在跳转到跟父级页面域名相同的网页，你可以把异步的信息存在window.name上面，此时窗口没有改变，只是改变了网址，window。name依然存在，此时的ifram父子页面的url是同源，所以就能通过iframe.contentWindow.name获取window.name了
3、window.postMessageHTML5的API,
4.AJAX通信的三种方式：jsonp，cors，WebSocket；以后在详细补充