jsonp跨域

最新推荐文章于 2022-08-15 21:15:20 发布

Cupid510

最新推荐文章于 2022-08-15 21:15:20 发布

阅读量79

点赞数

分类专栏： javaScript 文章标签： javascript jsonp

本文链接：https://blog.csdn.net/weixin_44283432/article/details/107346904

版权

javaScript 专栏收录该内容

235 篇文章 4 订阅

订阅专栏

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);
                }

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

Cupid510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域

jsonp跨域当我们出现这种情况时，就是浏览器拦截了跨域请求；我们先来看下同源的符合条件：同协议同域名/ip同端口号解决跨域问题的解决办法也有三种修改头文件：根据错误原因提示：CORS 头缺少 ‘Access-Control-Allow-Origin’，但是此方法会影响ajax的安全性。反向代理的方式，设置一个中间代理的文件jsonp跨域重点说下跨域的流程：在资源加载进来之前定义好一个函数，这个函数接受数据，在这个函数内利用这个数据参数执行一些代码然后需要的时候通过scrip
复制链接

扫一扫