前端跨域个人笔记

鱼缸盖被子了

已于 2022-05-04 21:29:29 修改

阅读量694

点赞数

文章标签：前端

于 2022-04-15 13:57:45 首次发布

本文链接：https://blog.csdn.net/yh8899abc/article/details/124192946

版权

跨域：同源协议：协议、域名、端口三者有一不同时，都会造成跨域

iframe 窗口通信

postmessage

我自己整理的一篇笔记
https://blog.csdn.net/yh8899abc/article/details/115240267

jsonP

概念：

浏览器通过<script>标签的src属性，请求服务器上的数据，同时返回一个函数的调用

特点：

1、jsonP不属于真正的Ajax请求，没有使用XMLHttpRequest对象
2、jsonP仅支持GET请求

请求的接口拼接方法名

<body>
    <!-- 写一个callback函数 来得到数据 -->
    <script>
        function callback(data){
            console.log(data);
        }
    </script>
    <!-- 通过src 可以访问到外源网址 -->
    <!-- 需要在网址后面加上 &callback=函数名 ;用一个函数来得到外源数据-->
    <script src="http://localhost:8000/product&callback=callback"></script>
</body>

封装jsonP方法

利用url上拼接带本地的方法来获取数据

// jsonp方法将跨域请求的地址 动态的加入index.html body中并在请求完数据后删除
let jsonp = (url, data ={}, callback='callback')=> {
    try {
        let dataStr = url.indexOf('?') === -1 ? '?' : '&';
        for (let key in data) {
            dataStr += `${key}=${data[key]}&`
        }
        dataStr += `callback=`+callback;
        let onScript = document.createElement('script');
        onScript.src = url + dataStr;
        document.body.appendChild(onScript);
        return new Promise((resolve, reject) => {
        	// 地址上携带callback方法
            window[callback] = (data) => {
                try {
                    resolve(data);
                } catch(err) {
                    reject(err);
                } finally {
                    onScript.parentNode.removeChild(onScript);
                }
            }
        })
    } catch (err) {
        console.log(err);
    }
}
jsonp('http://localhost:3000', {
    page: 1,
    cate: 'recommend',
}).then(res => console.log(res));
</script>

后端使用cors插件

例如nodejs 后台

// npm init -y
// server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/product', (req, res) => {
    res.json({
        a: 1,
        b: 2
    });
})
app.listen(8000, () => {
    console.log('server is ok;');
})

前端调用

fetch('http://localhost:8000/product')
.then(data => data.json())
.then(data => {
    console.log(data);
});

参考文章掘金的文章