跨域

最新推荐文章于 2024-03-07 18:14:24 发布

52小HH

最新推荐文章于 2024-03-07 18:14:24 发布

阅读量218

点赞数

分类专栏：跨域

本文链接：https://blog.csdn.net/weixin_40613615/article/details/105039416

版权

跨域专栏收录该内容

1 篇文章 0 订阅

订阅专栏

跨域

首先要明白，为什么要进行跨域，首先需要了解同源策略。

同源策略

浏览器用来阻止通过一个域的脚本来操作另一个域的资源的保护机制。
这个所说的同一个域有很明确的规定：

同协议
同域名（主机名）
同端口

跨域

跨域的方式：

jsonP
后端代理
nginx

这里暂时先看jsonP。

jsonP

jsonP是前端常用的跨域方式。
原理：利用script标签的src属性的跨域能力，在代码中动态的创建一个script标签，将src属性设置为要访问的资源地址，并通过回调函数获取后端返回的数据。
这里根据网上的例子，利用百度搜索实现一下。

<html>
    <head>
        <meta charset="utf-8">
        <style>
            
        </style>
    </head>
    <body>
        <input type="text" id="txt">
        <ul id="more"></ul>
        <script>
            // https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=a&req=2&bs=src%E5%92%8Chref%E7%9A%84%E5%8C%BA%E5%88%AB&pbs=src%E5%92%8Chref%E7%9A%84%E5%8C%BA%E5%88%AB&csor=1&cb=jQuery110203720139040550803_1584892243476&_=1584892243515

            function callback(data){
                var frags = document.createDocumentFragment();
                for(var ind in data.g){
                    var gBox = document.createElement('li');
                    gBox.innerHTML = data.g[ind].q;
                    frags.appendChild(gBox);
                }
                more.appendChild(frags);
            }
            txt.onkeyup = function(){
                more.innerHTML = '';
                var str = txt.value;
                var sc = document.createElement('script');
                sc.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=' + str + '&req=2&bs=src%E5%92%8Chref%E7%9A%84%E5%8C%BA%E5%88%AB&pbs=src%E5%92%8Chref%E7%9A%84%E5%8C%BA%E5%88%AB&csor=1&cb=callback&_=1584892243515';
                document.getElementsByTagName('head')[0].appendChild(sc)
            }
        </script>
    </body>
</html>

首先获取的百度的搜索地址，将wb参数和cb参数替换为自己的，再动态创建script标签获取数据，这里回调函数自己定义，但是必须再全局声明。
在这里插入图片描述
后端处理的方式，以上述代码为例，是取得cb参数的值callback，并以"callback(要返回的json数据)"的形式返回，这里要注意的是，前后端的获取回调函数的参数名必须一致，如都是cb。

52小HH

关注

0
点赞
踩
0

收藏

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

跨域首先要明白，为什么要进行跨域，首先需要了解同源策略。同源策略浏览器用来阻止通过一个域的脚本来操作另一个域的资源的保护机制。这个所说的同一个域有很明确的规定：同协议同域名（主机名）同端口跨域跨域的方式：jsonP后端代理nginx这里暂时先看jsonP。jsonPjsonP是前端常用的跨域方式。原理：利用script标签的src属性的跨域能力，在代码中动态...
复制链接

扫一扫