【javaScript】原生js通过CORS与JSONP实现跨域请求

JSONP实现跨域请求

问题的提出

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案，其实也是一种漏洞，官方不支持

解决方法

通过某些官方支持跨域请求的标签来实现（如script），对于这些标签存在的意义，本来官方的规定不是用来实现跨域的，而我们通过这些漏洞来实现

前端代码

<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>

script标签要求服务器返回的是js代码，已返回就执行
callback使用执行的函数（一般用于对页面的更改），该函数在前端页面同源中声明，通过后端的逻辑来调用（怎么调用？看后边后端的代码中的cb）

后端的代码

app.all('/jquery-jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});

CORS实现跨域

官方文档连接

自己的理解

没有太深的理解，等待更加深入的学习，再回头总结