彻底理解跨域解决方案JSONP

2021-07-11 23:12:58

什么是同源策略？

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当一个百度浏览器

执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

JSON与JSONP

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)

理解跨域（本地模拟跨域情形）

新建文件夹项目A与项目B

用HBuilder在chrome浏览器中打开A/sample.html，得到下面路径：

http://127.0.0.1:8020/A/sample.html

用WebStorm2016.3.1在chrome浏览器中打开B/samp.html，得到下面路径：

http://localhost:63342/B/sample.html?_ijt=f9l1pulrqoemklhrfr39lbdn7s

现在/A/sample.html访问B中的test.js，显然是跨域了。

把http://localhost:63342/B/test.js直接引入/A/sample.html里面：

再次刷新http://127.0.0.1:8020/A/sample.html时，WebStorm图标会显示黄色提示你打开：

选择Copy authorization URL to clipboard复制新生成的webstorm小型服务器下的test.js地址，复制粘贴到路径：

这样，再次刷新http://127.0.0.1:8020/A/sample.html的时候，test.js里面的内容就可以访问了！

创建一个真正的前后端交互情景

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>testA</title>

    </head>

    <body>

        <script>

            function addScriptTag(src) {

                var ele = document.createElement('script');

                ele.type = 'text/javascript';

                ele.src = src;

                document.body.append(ele);

            }

            window.onload = function () {

                addScriptTag("http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=result");

            };

            function result(data) {

                alert('data: ' + data);

                console.log(data);

            }

        </script>

    </body>

</html>

这个callback需要后端去定义！

可供测试的JSONP服务(以下信息来自使用 JSONP 实现跨域通信)：

Geonames API：邮编的位置信息：

　　http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

Flickr JSONP API：载入最新猫的图片：

　　http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：

　　http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

码农公寓

相关文章