什么是同源策略？

同源策略，它是由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. Freemarker常用指令使用范例

    我的開發環境 框架:           springmvc+freemarker 開發工具:    springsource-tool-suite-2.9.0 JDK版本:    1.6.0_29 ...

  2. 页面超慢，zabbix却没报警

    故障背景:网站页面打开速度非常慢 排查过程: 1.一开始用vmstat 看到procs下的r值稳定在5.6,由于这台服务器是12核24线程,并且cpu的wa很大,说明系统很轻松, 肯定不会报警了,那为 ...

  3. 关于java8 interface的default方法

    转自鸟窝 博主写的挺详细,不了解的看一看啊 以前经常谈论的Java对比c++的一个优势是Java中没有多继承的问题. 因为Java中子类只能继承(extends)单个父类, 尽管可以实现(implem ...

  4. linux之LVM

    一.简介 LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵 ...

  5. oracle迁移mysql数据库注意

    oracle转mysql修改: . substr() substr( string , 0, 10) 这里测试 必须从 第一位获取 既是 substr(string , 1 , 10)2. to_ch ...

  6. JavaScript 基础第三天

    一.前言 在前天的内容我们提到了有关于JS的一些语言结构,这些语言结构都是语法中最为基本的内容必须予以熟记并可以灵活掌握. 二.引入 在今天内容中我们将讨论两个很重要的概念,数组与函数. 三.重点内容 ...

  7. [POI2008]KLO && POC

    题意:给定一个序列 s1, s2,...sn,以及一个k,求一个连续的k个数,把s[i]...s[i+k-1]变成一个数s',使得sigma(|s[j]-s'|)(i<=j<=i+k-1) ...

  8. SQLite无法使用drop column删除表字段解决办法

    由于项目需求变更,我需要在sqlite数据库的表中删除一个字段,通用的sql操作语句如下: alter table record drop column name; 结果数据库提示如下错误: 搜索得知 ...

  9. 以 Composer 的方式在 PhpStorm 中添加代码审查工具 Code Sniffer

    一.前提条件 Windows 操作系统 可以在本地运行的 PHP 环境,个人用的是 laragon PhpStorm Composer 二.设置步骤 (一)下载 Code Sniffer 主要使用 P ...

  10. Android ViewPager 用法

    Android ViewPager 用法 场景:一般第一次打开应用程序时,程序会有一个提示页来给展现应用程序都有哪些功能:或者程序更新时,又更新哪些新特性,都可以使用ViewPager Demo 描述 ...