五种跨域的解决方法

殿君不是殿军

已于 2022-05-18 10:41:30 修改

阅读量184

点赞数

分类专栏：经验分享

于 2022-05-18 10:40:22 首次发布

本文链接：https://blog.csdn.net/qq_43375584/article/details/124837556

版权

前端 javascript json

经验分享专栏收录该内容

61 篇文章 3 订阅

订阅专栏

跨域

jsonp

前端：新建script标签通过src发送请求返回函数调用
代码：
1234
我是新增的
我也是新增的
1234---------------------
function jsonp(obj) {

参数

obj.type = obj.type || ‘get’;

obj.url = obj.url || ‘’;
let data = { …obj.data };

把对象转换成字符串的形式

var arr = [];
for (var k in data) {
arr.push(${k}=${data[k]})
}
obj.url = ${obj.url}?${arr.join('&')};

动态创建script标签

var script = document.createElement(‘script’);
script.src = obj.url;
document.body.appendChild(script)
window[data.cb] = function (data) {

window[data.cb] 是全局的目的是把cb里的参数当做函数名，后台返回的show() 去调用因为cb里的参数不固定，所以以data.cb的形式相当于 function show(){} obj.success(data) 里的success会自动去调用jsonp里的success

return obj.success(data)
}
}
jsonp({
url: ‘http://localhost:3000/say’,
data: {
wd: ‘zs’,
cb: ‘show’
},
success: function (data) {
console.log(data)
}
})
后端：
返回函数名调用的形式数据通过实参传递
代码：
let express = require(‘express’);
let app = express();
app.get(‘/say’, function (req, res) {
let { wd, cb } = req.query;
// console.log(wd)
// res.send(‘ok’)
res.end(${cb}(123))
})
app.listen(3000, () => {
console.log(‘启动成功’)
})

cors

cors 是后端做的操作，需要为头做一些处理，告诉浏览器一些相关信息。

1.告诉浏览器哪个源可以访问我
res.setHeader(‘Access-Control-Allow-Origin’, origin)
2.告诉浏览器允许携带哪个头可以访问我
res.setHeader(‘Access-Control-Allow-Headers’, ‘name’)
3.允许哪个请求方法访问我。浏览器默认支持get post方法
put 方法两次
第一次：试探询问 options
第二次：发送ajax请求
res.setHeader(‘Access-Control-Allow-Methods’, ‘PUT’);
4.是否允许携带cookie
res.setHeader(‘Access-Control-Allow-Credentials’, true);

postmessage

实现步骤：

首先通过iframe标签向端口4000的b页面发送请求但是无法传送数据因为跨域
然后获取iframe标签利用contentWindow.postMessage向子页面b发送内容 postMessage里面有两个参数第一个是发送的内容第二个是规定向哪个页面发送内容
接着子页面b通过window.onmessage接收到a发送的内容
再接着通过e.source.postMessage向a页面发送内容响应内容
最后a页面通过window.onmessagej接收到内容存储在e.data

a页面
<body>
    <iframe src="http://localhost:4000/b.html" onload="load()" id="box"></iframe>
    <!-- <iframe src="http://localhost:4000/b.html" onload="load()" id="frames"></iframe> -->
</body>
<script>

    function load() {
        let frams = document.querySelector('#box')
        frams.contentWindow.postMessage('我爱你', 'http://localhost:4000/b.html');
        window.onmessage = function (e) {
            console.log(e.data);
        }
    }
b页面：
	   window.onmessage = function (e) {
            console.log(e);
            e.source.postMessage('我不爱你', e.origin)
        }

name

实现步骤：

a页面通过iframe引入子页面c发送请求页面可以过来但是c页面里的内容不能引入过来，因为端口号不同，所以无法请求
在端口4000的c页面上挂载window.name
接下来就是a页面要拿到c页面的window.name里的内容
获取iframevar frame = document.querySelector('#frames')
直接通过frame.contentWindow会出现跨域的问题
然后让a页面指向一个同域的b页面frame.src = 'http://localhost:3000/b.html'
通过frame.contentWindow拿到b页面里的name
因为是c页面和b页面的window是共享的所以b可以拿到c的name
然后a就可以通过同域的b页面拿到c里面的name

<body>
    <!-- <iframe src="http://localhost:4000/c.html" onload="load()" id="frames"></iframe> -->

    <iframe src="http://localhost:4000/c.html" onload="load()" id="frames" frameborder="0"></iframe>
</body>
<script>
    var first = true
    function load() {
        var frame = document.querySelector('#frames')
        if (first) {
            frame.src = 'http://localhost:3000/b.html'
            first = false
        } else {
            console.log(frame.contentWindow.name);
        }
    }
c页面
    <script>

        window.name = '我爱你啊'
    </script>

hash

hash:是地址栏#号后面的内容称为hash

a页面通过iframe向c页面发送请求加上#后面的hash内容
c页面收到后 a页面接收到不因为跨域
然后c页面又向b页面发送请求iframe.src = 'http://127.0.0.1:3000/b.html#idontloveyou';
b页面与a页面同域 b页面通过window.parent.parent.location.hash找到父级的a页面
a页面通过window.onhashchange （只要hash发生变化就会触发这个事件）
最后a就可以通过location.hash 把hash内容打印出来

a页面
<body>
    <iframe src="http://localhost:4000/c.html#iloveyou" frameborder="0"></iframe>
    
</body>
<script>
    
    window.onhashchange = function () {
        console.log(location.hash)
    }  
</script>
c页面：
        // var iframe = document.createElement('iframe');
        // iframe.src = 'http://localhost:3000/b.html#idontloveyou';
        // document.body.appendChild(iframe)
b页面：
	window.parent.parent.location.hash = location.hash