彻底理解跨域解决方案JSONP

时间：2022-02-14 23:28:40

什么是同源策略？

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

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

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

 JSON与JSONP

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

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

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

彻底理解跨域解决方案JSONP

用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里面：

彻底理解跨域解决方案JSONP

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

彻底理解跨域解决方案JSONP

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

彻底理解跨域解决方案JSONP

这样，再次刷新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. 前端跨域解决方案&colon; 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&period;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&lpar;三&rpar; javascript跨域问题&lpar;JSONP解决&rpar;

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

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

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

  9. JSON跨域解决方案收集

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

随机推荐

  1. 重构wangEditor（web富文本编辑器），欢迎指正！

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  2. AngularJS 实现的输入自动完成补充功能

    1.首先需要引入:angucomplete.js第三方库 2.增加model : var app = angular.module('app', ["angucomplete"]) ...

  3. MSP430常见问题之电源类

    Q1:msp430(我用的4619)的VCC,DVCC,VSS,DVSS怎么接啊?模拟的和数字的一样吗?A1:CC 就是正,SS 就是负,A是模拟电,D 是数字电,A的都接在一起,D 的都接在一起,地 ...

  4. 面向对象基础（class0425&rpar;字符串与集合

    常用类库 学习.net就是学习它的无数个类库怎么用,先看两个简单的 String 字符串,不可变特性.字符串可以看成字符数组 属性 Length 方法 IsNullOrEmpty() 静态方法 ToC ...

  5. 【HDU4333】Revolving Digits（扩展KMP&plus;KMP）

    Revolving Digits   Description One day Silence is interested in revolving the digits of a positive i ...

  6. Lucene&period;Net 2&period;3&period;1开发介绍 —— 三、索引（七）

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(七) 5.IndexWriter 索引这部分最后讲的是IndexWriter.如果说前面提到的都是数据的结构,那么IndexWriter ...

  7. Maven多模块项目编译失败：程序包xxx不存在

    项目结构如下: parent(父类工程) | - - - - - common(通用工具类子工程) | - - - - - projectA(springboot子工程,依赖common工程) pom ...

  8. Centos6&period;5&plus;Redmine

    花了两天时间,基于centos6.5操作系统,搭建了redmine环境,在这里记录下过程中遇到的问题以及搭建流程. centos6.5; redmine2.5.0; Ruby1.9.3; step 1 ...

  9. eclipse工具maven项目打包文件不是最新修改的

    1.问题描述:maven项目,完成一些功能开发后,在进行打包更新服务器系统时,本地eclipse工具对文件打成jar包操作,更新到服务器上没有修改的效果,包括打包整个工程为一个war包,也是有同样问题 ...

  10. 2d旋转（css3实现过度效果和动画效果）

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

相关文章