关于jsonp跨域问题，在这个方面也是了解一点点，先记录下来，主要作为以后查看，之前下载并安装过wampserver，了解到了jsonp和json的区别，现在谈谈跨域这个问题：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制

浏览器的同源策略

古代的楚河汉界明确规定了楚汉两军的活动界限，理应遵守，否则必天下大乱，而事实上天下曾大乱后又统一。这里我们不用管这些“分久必合，合久必分”的问题，关键是看到这里规定的“界限”。

Web世界之所以能如此美好地呈现在我们面前，多亏了浏览器的功劳，不过浏览器不是一个花瓶——只负责呈现，它还制定了一些安全策略，这些安全策略有效地保障了用户计算机的本地安全与Web安全。

计算机的本地与Web是不同的层面，Web世界（通常称为Internet域）运行在浏览器上，而被限制了直接进行本地数据（通常称为本地域）的读写。

同源策略是众多安全策略的一个，是Web层面上的策略，非常重要，如果少了同源策略，就等于楚汉两军没了楚河汉界，这样天下就大乱了。

同源策略规定：不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源。

下面分析同源策略下的这个规定，其中有几个关键词：不同域、客户端脚本、授权、读写、资源。

1．不同域或同域

同域要求两个站点同协议、同域名、同端口，比如：下列所列站点与http://www.foo.com是否同域的情况。

https://www.foo.com不同域，协议不同，https与http是不同的协议

http://xeyeteam.foo.com不同域，域名不同，xeyeteam子域与www子域不同

http://foo.com不同域，域名不同，顶级域与www子域不是一个概念

http://www.foo.com:8080不同域，端口不同，8080与默认的80端口不同

http://www.foo.com/a/同域，满足同协议、同域名、同端口，只是这里多了一个目录而已

跨域请求的含义特别注意两点：

第一，如果是协议和端口造成的跨域问题“前台”是无能为力的

第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。

2．客户端脚本

客户端脚本主要指JavaScript（各个浏览器原生态支持的脚本语言）、ActionScript（Flash的脚本语言），以及JavaScript与ActionScript都遵循的ECMAScript脚本标准。Flash提供通信接口，使得这两个脚本语言可以很方便地互相通信。客户端的攻击几乎都是基于这两个脚本语言进行的，当然JavaScript是最广泛的。

 

3．授权

一般情况下，看到这个词，我们往往会想到服务端对客户端访问的授权。客户端也存在授权现象，比如：HTML5新标准中提到关于AJAX跨域访问的情况，默认情况下是不允许跨域访问的，只有目标站点（假如是http://www.foo.com）明确返回HTTP响应头：

Access-Control-Allow-Origin: http://www.evil.com

那么www.evil.com站点上的客户端脚本就有权通过AJAX技术对www.foo.com上的数据进行读写操作。这方面的攻防细节很有趣，相关内容在后面会详细介绍。

4．读写权限

Web上的资源有很多，有的只有读权限，有的同时拥有读和写的权限。比如：HTTP请求头里的Referer（表示请求来源）只可读，而document.cookie则具备读写权限。这样的区分也是为了安全上的考虑。

5．资源

资源是一个很广泛的概念，只要是数据，都可以认为是资源。同源策略里的资源是指Web客户端的资源。一般来说，资源包括：HTTP消息头、整个DOM树、浏览器存储

（如：Cookies、Flash Cookies、localStorage等）。客户端安全威胁都是围绕这些资源进行的。

注：DOM全称为Document Object Model，即文档对象模型，就是浏览器将HTML/XML这样的文档抽象成一个树形结构，树上的每个节点都代表HTML/XML中的标签、

标签属性或标签内容等。这样抽象出来就大大方便了JavaScript进行读/写操作。Web客户端的攻击几乎都离不开DOM操作。

到此，已经将同源策略的规定分析清楚，如果Web世界没有同源策略，当你登录Gmail邮箱并打开另一个站点时，这个站点上的JavaScript就可以跨域读取你的Gmail邮箱数据，

这样整个Web世界就无隐私可言了。这就是同源策略的重要性，它限制了这些行为。当然，在同一个域内，客户端脚本可以任意读写同源内的资源，前提是这个资源本身是可读可写的。

1.　　例子1：假设有两个端口（http://www.tutu.com:8080和http://www.tutu.com:8081）
在F:\wamp\www\index1下面有个jsonp.html，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script>
  6.         var localHandler = function(data){
  7.         alert('我是本地函数，可以被跨域的jsonp-remote.js文件调用，远程js带来的数据是：' + data.result);
  8.     };
  9.     </script>
  10.  
  11.     <script type="text/javascript" src="http://www.tutu.com:8081/jsonp-remote.js"></script>
  12. </head>
  13. <body>
  14.  
  15. </body>
  16. </html>

　　在F:\wamp\www\index2下面有个jsonp-remote.js，代码如下：

  1. /* alert('我是远程文件'); */
  2. localHandler({"result":"我是远程js带来的数据aaaabbb"});
2.　　例子2：在F:\wamp\www\index1下面有个jsonp1.html，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="jquery.js"></script>
  6.  
  7. </head>
  8. <body>
  9.  <script type="text/javascript">
  10.      jQuery(document).ready(function(){
  11.         $.ajax({
  12.              type: "get",
  13.              async: false,
  14.              url: "http://www.tutu.com:8081/jsonp1-flightResult.aspx",
  15.              dataType: "jsonp",
  16.  
  17.              //jsonp: "callbackkkk",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)    ?????    
  18.  
  19.              //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了？？
  20.              //上面这句话怎么解释？
  21.  
  22.              //加上  jsonp:"callbackkkk" 这句话，为：?callbackkkk=flightHandler，相当于参数
  23.              //没有的话：默认?callback=flightHandler
  24.  
  25.              jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  26.  
  27.              //由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，
  28.              //所以就带一个QueryString让客户端告诉服务端，回调方法是什么，
  29.              //当然，QueryString的key要遵从服务端的约定，这里是callbackkkk或者默认的”callback“。
  30.  
  31.              success: function(json){
  32.                  alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets+'张。');
  33.  
  34.              },
  35.              error: function(){
  36.                  alert('fail');
  37.              }
  38.          });
  39.  
  40.          //
  41.          //
  42.      });
  43.      </script>
  44. </body>
  45. </html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx，代码如下：

  1. flightHandler({
  2.     "code": "CA1998",
  3.     "price": ,
  4.     "tickets":
  5. });

3.　　例子3：在F:\wamp\www\index1下面有个jsonp2.html，代码如下：（例子三有问题，放在这提醒自己）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="jquery.js"></script>
  6.     <script type="text/javascript">
  7.      jQuery(document).ready(function(){
  8.         $.ajax({
  9.              type: "get",
  10.              async: false,
  11.              url: "http://www.tutu.com:8081/jsonp2-flightResult.html?code=CA1998",
  12.              dataType: "jsonp",
  13.              jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
  14.              jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
  15.              success: function(json){
  16.                  alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
  17.              },
  18.              error: function(){
  19.                  alert('fail');
  20.              }
  21.          });
  22.      });
  23.      </script>
  24. </head>
  25. <body>
  26.  
  27. </body>
  28. </html>

在F:\wamp\www\index2下面有个jsonp1-flightResult.aspx，代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.  
  6.     <script type="text/javascript">
  7.         var flightHandler = {
  8.             "code": "CA1998",
  9.             "price": 1780,
  10.             "tickets": 5
  11.         }
  12.     </script>
  13. </head>
  14. <body>
  15.  
  16. </body>
  17. </html>
  1. 怎样将Javascript对象转化成json，发送？可以使用jquery.json插件，这里没有使用，所以例三是不完整的
  2.  
  3. 4.　　例子4：在F:\wamp\www\index1下面有个jsonp-a.html，代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="jquery.js"></script>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <script>
  11. $(document).ready(function(){
  12.     $("#web").click(function(){
  13.  
  14.         $.ajax({
  15.             type : "get",
  16.             async:false,
  17.             url : "http://www.tutu.com:8081/jsonp-b.php",
  18.             dataType : "jsonp",
  19.             data:{key:6},
  20.             //?jsonpcallback=jQuery1830070291701721...
  21.             jsonp: "jsonpcallback",//服务端用于接收callback调用的function名的参数                        
  22.  
  23.             //首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字jsoncallback
  24.             //(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，
  25.             //要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，
  26.             //服务器生成 json 数据才能被客户端正确接收。
  27.             //然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
  28.             //最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
  29.             //客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，
  30.             //传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）
  31.  
  32.             //jsonpCallback:"flightHandler"//没有这句
  33.  
  34.             success : function(json){
  35.                 //alert(json);
  36.                 alert(json[0].name+'777');
  37.  
  38.                 var newstr='';
  39.                 $.each(json,function(i,v){
  40.                     newstr = newstr +' '+ v.id + "     " + v.name;
  41.                 });
  42.                 $("#result").append(newstr);
  43.  
  44.             },
  45.             error:function(){
  46.                 alert('fail');
  47.             }
  48.         });
  49.     })
  50. })
  51. </script>
  52.  
  53. <button id="web">ajax跨域</button>
  54.  
  55. <div id="result" style="font-size:30px;color:red"></div>
  56.  
  57. </body>
  58.  
  59. </html>

在F:\wamp\www\index2下面有个jsonp-b.php，代码如下

  1. <?php
  2. if( isset($_GET['jsonpcallback']) ){
  3.     //php里面的$_GET 变量用于收集来自 method="get" 的表单中的值。
  4.     //输出jsonp格式的数据
  5.     $a=$_GET['key']+1;
  6.     echo $_GET['jsonpcallback']."([{id:".$a.",name:'data001'},{id:2,name:'data002'}])";
  7.     exit();
  8. } 
  1. 以上是参考资料后自己的部分实践

我的jsonp跨域问题的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  7. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  8. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

  9. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

随机推荐

  1. NSString 初始化方法的内存比较

    NSString *str1 = @"hello"; NSString *str2 = @"hello"; NSString *str3 = [NSString ...

  2. iOS //清除本地缓存

    //清除本地缓存 -(void)clearCache{ dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT ...

  3. 【MongoDB】 Windows 安装

    Windows下安装MongoDB,虽然网上有很多攻略,但是还是有很多坑,为了以后少犯错误,特此记录. 1.下载安装包 https://fastdl.mongodb.org/win32/mongodb ...

  4. AutoMapper搬运工之配置

    回顾 前几篇搬运了AutoMapper的基本用法,自定义映射,相信有看的同学已经会使用AutoMapper这个强大的Mapping工具了.不过细心的你是否还记得前几篇中有提到Map的创建并非是每次都需 ...

  5. Google赛马问题

    http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...

  6. MVC 好记星不如烂笔头之 ---> 全局异常捕获以及ACTION捕获

    public class BaseController : Controller { /// <summary> /// Called after the action method is ...

  7. iOS NSOperation 异步加载图片 封装NSOperation 代理更新

    #import <Foundation/Foundation.h> @class MYOperation; @protocol MYOperationDelecate <NSObje ...

  8. Node.js-Socket.IO【1】-身份验证

    Websocket身份验证失败的时候,希望向前台传输错误信息,但是Socket.IO目前最新版本1.4.6在后台使用 next(new Error('unauthorization')); 前端的代码 ...

  9. 自动提交Git branch代码评审到Review Board系统

    背景 敏捷软件开发中,越小的反馈环,意味着软件质量越容易得到保证. 作为组件团队,我们的开发任务中,往往存在一些特性涉及到几十个功能点,开发周期持续数周或数月的情况.如何在开发过程中保证软件质量,是个 ...

  10. java 深度遍历文件夹中的所有文件

    看标题就知道是什么意思了吧,所以就不多说了,直接贴代码: import java.io.*; public class files { private static void iterateFile( ...