jsonp突破浏览器同源策略

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    {% load staticfiles %}

</head>

<body>

<script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>

<div id="content1"></div>

<div id="content2"></div>

<div id="content3"></div>

<div id="content4"></div>

<input type="button" value="发送" onclick="submitjsonp1();"/>

<input type="button" value="发送" onclick="submitjsonp2();"/>

<input type="button" value="发送" onclick="submitjsonp3();"/>

<input type="button" value="发送" onclick="submitjsonp4();"/>

<script>

        function submitjsonp1(){

               $.ajax({

                    url:'/ajax.html',

                    type:'GET',

                    data:{nid:2},

                    success:function(arg){

                        $("#content1").html(arg);

                    }

                })

        }

        function submitjsonp2(){

               $.ajax({

                    url:'http://127.0.0.1:9000/ajax.html',

                    type:'GET',

                    data:{nid:2},

                    success:function(arg){

                        $("#content2").html(arg);

                    }

                })

        }

        function submitjsonp3(){

            var tag=document.createElement('script');

            tag.src="http://127.0.0.1:9000/ajax.html";

            document.head.appendChild(tag);

            document.head.removeChild(tag);

         }

        function funk(arg){

            $('#content3').html(arg);

        }

         function submitjsonp4(){

            $.ajax({

            url:"http://127.0.0.1:9000/ajax.html",

            type:'GET',

            dataType:'jsonp',

            })

        }

</script>

</body>

</html>

　　

实验准备：本地有两个服务：8000，9000。

8000为作为本地服务器，9000作为别的服务器。

使用ajax访问本地

submitjsonp1对应为第一种方式：
def ajax(request):

    return HttpResponse("本地请求")

　　

点击第一个发送：

使用ajax访问外部服务器

submitjsonp2对应第二种方式：

from django.shortcuts import render,HttpResponse

# Create your views here.

def ajax(request):
    return HttpResponse("funk('外部服务器');")

　　

点击第二个发送

使用jsonp方法

submitjsonp3对应第三种方式：
from django.shortcuts import render,HttpResponse

# Create your views here.

def ajax(request):

    return HttpResponse("funk('外部服务器');")

　　

点击第三个发送：

最好的方法

submitjsonp4对应第四种方式：
from django.shortcuts import render,HttpResponse

# Create your views here.

def ajax(request):

    return HttpResponse("funk('外部服务器');")

　　

点击第四个发送：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    {% load staticfiles %}

</head>

<body>

<script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>

<div id="content"></div>

<input type="button" value="发送" onclick="submitjsonp();"/>

<script>

        function submitjsonp(){

            $.ajax({

            url:"http://127.0.0.1:9000/ajax.html",

            type:'GET',

            dataType:'jsonp',

            jsonp:'callback',

            jsonpCallback:'funk',

            })

        }

          function funk(arg){

            $('#content').html(arg);

        }

</script>

</body>

</html>
上面第四种方法，访问的时候，外部服务器返回的是固定的函数，如果我们把我们本地的函数名传递给服务器，服务器返回的函数名就不会定死了。
jsonp:'callback',

jsonpCallback:'funk',
指定
http://127.0.0.1:9000/ajax.html?callback=func




from django.shortcuts import render,HttpResponse

# Create your views here.

def ajax(request):

    name=request.GET.get('callback')

    print(name)

    return HttpResponse("%s('外部服务器');" %(name,))





　　



总结：




jsonp是一种方法,用来突破浏览器的同源策略，和别的网站进行交互。

我们在第三种方法中，先生成了script标签，通过给标签的src属性赋值，这里script的src属性是不受同源策略限制！
我们发送请求到别的服务器，返回的数据一定要被函数封装的，这里为funk函数，里面为数据，


return HttpResponse("funk('外部服务器');")


接收数据，一定要在本地创建一个同名函数，这里为funk函数，我们就可以拿到返回数据。



document.head.appendChild(tag);
document.head.removeChild(tag);
在head标签中创建这个标签，当通过src属性访问外部服务器，拿到返回结果，就会删除标签。



第四种方法:使用dataType:'jsonp'，自动帮我们在head标签生成script标签，我们只需要创建同名函数，拿到返回数据。




　　


												


											
jsonp突破浏览器同源策略的更多相关文章
	

    
								
  1. [js]浏览器同源策略(same-origin policy)
		
    浏览器的同源策略 浏览器同源政策及其规避方法 什么是同源策略 A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源".所谓"同源"指的是" ...
    
		
    2. 
						
  2. 浏览器同源策略及Cookie的作用域
		
    from:https://blog.csdn.net/wang379275614/article/details/53333054 如题,本文主要介绍两方面内容:首先简单介绍浏览器的同源策略与其带来的 ...
    
		
    3. 
						
  3. django csrf_protect及浏览器同源策略
		
    1.django在检测post行为时会有诸多的限制. 为了防止跨域请求伪造安全 参考:http://www.qttc.net/201209211.html   https://www.cnblogs. ...
    
		
    4. 
						
  4. 浏览器同源策略，跨域请求jsonp
		
    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
    
		
    5. 
						
  5. [oldboy-django][2深入django]浏览器同源策略 + JSONP + cros
		
    浏览器的同源策略: - 同源: 同方法,同域名,同端口 http://www.baidu.com:8000 http: 方法 www.baidu.com: 域名 8000: 端口 - 定义 网上解析非 ...
    
		
    6. 
						
  6. 浏览器同源策略与ajax跨域方法汇总
		
    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...
    
		
    7. 
						
  7. Same Origin Policy 浏览器同源策略详解
		
    同源策略 Same Origin Policy 日常开发中最常与网络打交道,那关于浏览器的同源策略和跨域相关的知识是该整理一下了. 首先需要明确的是,同源策略是浏览器的安全策略,由于存在这个策略,我们 ...
    
		
    8. 
						
  8. jsonp原理及同源策略
		
    [个人学习笔记,如有问题还请前辈纠正] jsonp 是用来跨域读取数据的,为什么从不同的域访问数据要用jsop呢?这源于一个著名的安全策略--同源策略,即: 协议.端口号.域名相同 举例说明:http ...
    
		
    9. 
						
  9. 踩坑录- Spring Boot - CORS 跨域 - 浏览器同源策略
		
    1.解决办法,创建一个过滤器,处理所有response响应头 import java.io.IOException; import javax.servlet.Filter; import javax ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Confluence 6 安装一个语言组件
			
    Confluence 捆绑了一系列的语言包.这些语言包在 'Language Configuration'  界面中的语言选项中.在 Confluence 的管理员控制台,你可以选择 Choosing ...
    
			
    2. 
						
  2. 进程与程序 并行 并发 串行 阻塞  join函数
			
    进程是正在运行的程序,程序是程序员编写的一对代码,也就是一堆字符,当这堆代码被系统加载到内存并执行,就有了进程. (需要注意的是:一个程序是可以产生多个程序,就像我们可以同时运行多个QQ程序一样,会形 ...
    
			
    3. 
						
  3. 论坛IP地址追踪&路由器密码嗅探
			
    一.论坛IP地址查询 1.任何应用程序部可以调用一个标准的库函数来查看给定名称的主机IP地址.类似地,系统还提供一个逆函致—给定主机的IP地址,查看它所对应的主机名.大多数使用主机名作为参数的应用程序 ...
    
			
    4. 
						
  4. DIY电源拓扑线
			
    记一些小事. 一.材料及工具:电源座DC-005.热熔胶.废弃PCB.锡线.导线.电烙铁.热风枪(或打火机.热熔胶枪) 二.使用热熔胶将电源座粘在一起.两个电源座之间垫一块废弃的PCB,防止两者距离过 ...
    
			
    5. 
						
  5. Java 一个关于使用&&导致的BUG
			
    二维数据track的定义: byte[][] track = new byte[10][10]; 本意:判断track[trackY][trackX]的值是否为零,以及trackX是否小于10. 带B ...
    
			
    6. 
						
  6. Spring 整合 Quartz 实现动态定时任务
			
    复制自:https://www.2cto.com/kf/201605/504659.html 最近项目中需要用到定时任务的功能,虽然Spring 也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能 ...
    
			
    7. 
						
  7. 安装Mysql5.6.19
			
    存在异常: ERROR (HY000): Can't connect to MySQL server on 'localhost' (10061) 原因:Mysql的服务没有启动 windows7启动 ...
    
			
    8. 
						
  8. 数组练习题A财务管理
			
    第一次看全英文的题,还是有点不舒服的感觉,还是用了翻译器 Larry graduated this year and finally has a job. He's making a lot of m ...
    
			
    9. 
						
  9. FATAL Fatal error during KafkaServerStable startup. Prepare to shutdown (kafka.server.KafkaServerStartable) java.io.FileNotFoundException: /tmp/kafka-logs/.lock (Permission denied)
			
    1.启动kafka的时候,报错如下所示: [-- ::,] INFO zookeeper state changed (SyncConnected) (org.I0Itec.zkclient.ZkCl ...
    
			
    10. 
						
  10. Hadoop的namenode的管理机制，工作机制和datanode的工作原理
			
    HDFS前言: 1) 设计思想 分而治之:将大文件.大批量文件,分布式存放在大量服务器上,以便于采取分而治之的方式对海量数据进行运算分析: 2)在大数据系统中作用: 为各类分布式运算框架(如:mapr ...
    
			
    11.