什么是同源策略？

同源策略，它是由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=?

彻底理解跨域解决方案JSONP的更多相关文章

  1. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  2. jquery跨域解决方案JSONP

    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...

  3. 跨域解决方案 - JSONP

    目录 1. 定义 2. JSONP 解决跨域 3. 应用场景 4. 代码演示 1. 定义 在HTML 中, script 标签有两个个性质: script 标签可以不受同源策略的限制去访问服务器资源, ...

  4. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  5. 第十四节：Asp.Net Core 中的跨域解决方案（Cors、jsonp改造、chrome配置）

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  6. cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案

    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...

  7. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  8. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  9. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

随机推荐

  1. First Missing Positive && missing number

    https://leetcode.com/problems/first-missing-positive/ 我原以为数组中不会有重复的数字,所以利用min.max分别记录给定数组中出现的最小正整数和最 ...

  2. 初学 Java Web 开发，请远离各种框架，从 Servlet 开发

    Web框架是开发者在使用某种语言编写Web应用服务端时关于架构的最佳实践.很多Web框架是从实际的Web项目抽取出来的,仅和Web的请求和响应处 理有关,形成一个基础,在开发别的应用项目的时候则可以从 ...

  3. 算法入门笔记------------Day2

    1.开灯问题 有n盏灯,编号为1-n,第一个人把所有灯打开,第二个按下所有编号为2的倍数的开关(这些灯都被关掉),第三个人按下所有编号为3的倍数的开关,依次类推,一共有k个人,问最后有哪些灯开着?输入 ...

  4. javascript中array常用属性方法

    属性: length 表示一个无符号 32-bit 整数,返回一个数组中的元素个数. 截短数组..截短至长度2  则:   .length = 2 方法: Array.from() 方法可以将一个类数 ...

  5. （转）Linux的启动过程

    原文链接:http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 半年前,我写了<计算机是如何启动的?>,探讨BIOS ...

  6. JAVA/Android Map与String的转换方法

    在Android开发中 Map与String的转换在,在一些需求中经常用到,使用net.sf.json.JSONObject.fromObject可以方便的将string转为Map.但需要导入jar包 ...

  7. 如果你觉得我的博客对你有帮助，请帮忙加点我所在团队博客访问量http://home.cnblogs.com/u/newbe/

    RT http://home.cnblogs.com/u/newbe/ 跪谢~

  8. WP7推送通知服务

    原文地址http://www.cnblogs.com/Joetao/articles/2214482.html (一)为什么使用推送通知服务(1)Windows Phone执行模型决定只有一个第三方的 ...

  9. 在Python中调用glutInit遇到OpenGL.error.NullFunctionError的解决方法

    在window10 64bit + Python环境下,通过pip install PyOpenGL成功之后,无奈执行到glutInit()时候总是报错. OpenGL.error.NullFunct ...

  10. halcon车牌的识别

    read_image (Audi2, 'audi2') fill_interlace (Audi2, ImageFilled, 'odd') dev_set_color('green') thresh ...