跨域

最新推荐文章于 2024-08-12 09:41:26 发布

小呀嘛小二郎唷

最新推荐文章于 2024-08-12 09:41:26 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/haohong5515/article/details/84202566

版权

1、jsonp 需要目标服务器配合一个callback函数。

2、window.name+iframe 需要目标服务器响应window.name。

3、window.location.hash+iframe 同样需要目标服务器作处理。

4、html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。

5、CORS 需要服务器设置header ：`Access-Control-Allow-Origin。`

如果需要携带cookie，客户端要设置

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;

服务端要设置

access-allow-origin-credentials:true

而且此时为了安全考虑， Access-Control-Allow-Origin 不能设置为*，要设置为特定的网址

6、nginx反向代理这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。

收藏文章：

跨域资源共享 CORS 详解

大神的代码https://github.com/FatDong1/cross-domain

Jsonp

请求页面：

<body>
<p>hello world</p>
<script>
    function myFunction (data) {
        alert('获取数据成功，2s后改变数据！')
        let p = document.getElementsByTagName('p')[0]
        setTimeout(function () {
            p.innerHTML = data.message
        }, 2000)
        // 2s后p标签内的内容将改变
    }
</script>
<script src="http://localhost:3001?callback=myFunction"></script>
<!--在src里面的问号？后面的参数({callback: 'myFunction'})可以在3001端口页面中可以通过req.query.callback获取-->
</body>

被请求的页面：