什么是同源策略？

同源策略，它是由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. Global文件编译发布，代码不执行的问题与解决

    问题:在Application_BeginRequest添加防止跨站点注入的过滤代码,VS2005编译成DLL发布后发现代码不会被执行: 环境:windows server 2008 r2 x64位  ...

  2. 详细！交叉编译时 note: the mangling of 'va_list' has changed in GCC 4.4解决办法

    为什么要在标题前面加了详细两个字,就是为了吸引看文章的你还有写文章的我这种小白,我是从坑里面爬出来了. 废话少说.... 问题就是这样子了,至于解决办法,在网上搜索了很久,大多数以一段英文作为解决办法 ...

  3. mysql 性能配置优化

    修改mysql配置文件 my.cnf ,内容如下: [mysqld]datadir=/data/mysql/datasocket=/var/lib/mysql/mysql.sockuser=mysql ...

  4. javascriptone

    var start=Date.now();document.write("<h1>This is a paragraph.</h1>");function ...

  5. php中的mysql 和 mysqli 区别

    mysql是非持续连接函数,每次链接都会打开一个连接进程 mysqli是持续连接函数,多次运行将使用同一连接进程,从而降低服务器开销.

  6. Java学习笔记:控制反转

    控制反转(Ioc)模式(又称DI:Dependency Injection)就是Inversion of Control,控制反转.在Java开发中,IoC意味着将你设计好的类交给系统去控制,而不是在 ...

  7. javascript Xml兼容性随笔

    一.前言 (function (window) { if (!window.jasen) { window.jasen = {}; } if (!window.jasen.core) { window ...

  8. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制

    2013年10月06日最新整理. PHP版微信公共平台消息主动推送,突破订阅号一天只能发送一条信息限制 微信公共平台消息主动推送接口一直是腾讯的私用接口,相信很多朋友都非常想要用到这个功能. 通过学习 ...

  9. jmSlip WEB前端滑屏组件

    基于css3的滑屏组件 demo: http://slip.jm47.com 下载: https://github.com/jiamao/jmSlip 功能清单 区域横滚 整屏竖滚 滚动动画效果 区域 ...

  10. 基于Selenium的自动化测试 C#版(1)

    引子 我一直在思考,作为一个架构师,如何简化程序员的工作,减轻运维的压力,减低测试的要求.然后做了很多很多的尝试.最开始的公司培训文档,一键发布工具,Nuget版本管理,VS项目模板,SOA统一服务提 ...