JSONP解决同源限制

最新推荐文章于 2024-06-12 00:09:02 发布

顾名思逸。

最新推荐文章于 2024-06-12 00:09:02 发布

阅读量138

点赞数

文章标签：同源政策 JSONP 跨域数据交互前端开发

本文链接：https://blog.csdn.net/m0_63285774/article/details/124519769

版权

一.什么是同源

同源：当前网页的url和ajax请求的目标资源的url两者之间的协议，域名，端口号必须完全相同

二.同源政策的目的

三.使用JSONP解决同源限制

代码：

服务端：

//jsonp服务
app.all('/jsonp-server', (request, response) => {
    const data={
        name:"jiansuiying"
    }
    //将数据转换为字符串
    let str=JSON.stringify(data);
    response.end(`handle(${str})`)
})

    <div id="result"></div>
    <script>
        function handle(data){
            const result=document.getElementById('result')
            result.innerHTML=data.name
        }
    </script>
    <script src="http://127.0.0.1:8000/jsonp-server"></script>