jsonp跨域

时间：2020-07-10 22:01:54 阅读：82 评论：0 收藏：0 [点我收藏+]

jsonp跨域

技术分享图片
当我们出现这种情况时，就是浏览器拦截了跨域请求；
我们先来看下同源的符合条件：

同协议
同域名/ip
同端口号
解决跨域问题的解决办法也有三种
修改头文件：根据错误原因提示：CORS 头缺少 ‘Access-Control-Allow-Origin‘，但是此方法会影响ajax的安全性。
反向代理的方式，设置一个中间代理的文件
jsonp跨域

重点说下跨域的流程：

在资源加载进来之前定义好一个函数，这个函数接受数据，在这个函数内利用这个数据参数执行一些代码
然后需要的时候通过script标签加载对应的远程文件资源
当远程文件加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当做这个函数中的参数传进去

如下是个简单的查询历史上的今天

首先我们打开在线jsonp接口：网址http://cdn.asilu.com/#weather
先把html代码写好（注意引入bootstrap样式）

<body>
        <div class = ‘container‘>
            <div class = ‘panel panel-primary‘>
                <div class = ‘panel-heading‘>
                    <h3>历史上的今天</h3>
                </div>
                <div class = ‘panel-body‘>
                    <button id = ‘btn1‘ class = ‘btn btn-danger form-control‘>查询历史上今天</button>
                </div>
                <div class = ‘panel-footer‘>
                    <ul class="list-group" id = ‘ul1‘>
                      </ul>
                </div>
            </div>
        </div>
    </body>

先定义好一个函数

function download(data){
                var oUl = document.getElementById("ul1");
                var arr = data.data;
                var str = ``;
                for(var i = 0; i < arr.length; i++){
                    str += `<li class="list-group-item"><span>【${arr[i].year}年】</span> <a href="${arr[i].link}">${arr[i].title}</a></li>`;
                }

                oUl.innerHTML = str;
            }

然后需要的时候通过script标签加载对应的远程文件资源

         var oBtn = document.getElementById("btn1");
                oBtn.onclick = function(){
                    var oScript = document.createElement("script");
                    oScript.src = "https://api.asilu.com/today/?callback=download";
                    document.body.appendChild(oScript);
                }

最后实现的效果如图所示：

技术分享图片

jsonp跨域

原文：https://www.cnblogs.com/cupid10/p/13281450.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)