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. 浏览器同源策略及Cookie的作用域

    from:https://blog.csdn.net/wang379275614/article/details/53333054 如题,本文主要介绍两方面内容:首先简单介绍浏览器的同源策略与其带来的 ...

  3. django csrf_protect及浏览器同源策略

    1.django在检测post行为时会有诸多的限制. 为了防止跨域请求伪造安全 参考:http://www.qttc.net/201209211.html   https://www.cnblogs. ...

  4. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  5. [oldboy-django][2深入django]浏览器同源策略 + JSONP + cros

    浏览器的同源策略: - 同源: 同方法,同域名,同端口 http://www.baidu.com:8000 http: 方法 www.baidu.com: 域名 8000: 端口 - 定义 网上解析非 ...

  6. 浏览器同源策略与ajax跨域方法汇总

    原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...

  7. Same Origin Policy 浏览器同源策略详解

    同源策略 Same Origin Policy 日常开发中最常与网络打交道,那关于浏览器的同源策略和跨域相关的知识是该整理一下了. 首先需要明确的是,同源策略是浏览器的安全策略,由于存在这个策略,我们 ...

  8. jsonp原理及同源策略

    [个人学习笔记,如有问题还请前辈纠正] jsonp 是用来跨域读取数据的,为什么从不同的域访问数据要用jsop呢?这源于一个著名的安全策略--同源策略,即: 协议.端口号.域名相同 举例说明:http ...

  9. 踩坑录- Spring Boot - CORS 跨域 - 浏览器同源策略

    1.解决办法,创建一个过滤器,处理所有response响应头 import java.io.IOException; import javax.servlet.Filter; import javax ...

随机推荐

  1. Mybatis调用PostgreSQL存储过程实现数组入参传递

    注:本文来源于 < Mybatis调用PostgreSQL存储过程实现数组入参传递  > 前言 项目中用到了Mybatis调用PostgreSQL存储过程(自定义函数)相关操作,由于Pos ...

  2. Oracle 数据备份与恢复

    前言 一:备份与恢复概述 二:RMAN 工具概述 1: RMAN 组件 1: RMAN命令执行器 [oracle@localhost ~]$ rman target system/nocatalog ...

  3. python之通过thread来实现多进程

    代码如下: import threading, time class Test1(threading.Thread): def __init__(self, name): super().__init ...

  4. 饮冰三年-人工智能-Python-14Python基础之变量与函数

    1:函数:函数是逻辑结构化和过程化的一种编程方法.函数即变量 #参数组:**字典 *列表 def test(x,*args): print(args); print(args[0]); print(& ...

  5. 2017-2018-2 20165206 实验三 《敏捷开发与XP实践》实验报告

    2017-2018-2 20165206 实验三 <敏捷开发与XP实践>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:韩啸 学号:20165206 指导教师: ...

  6. svn_linux + apache 实现网页访问svn

    CentOS7:搭建SVN + Apache 服务器实现网页访问 1. 安装httpd 安装httpd服务: $ sudo yum install httpd 检查httpd是否安装成功: $ htt ...

  7. Android Studio 打包签名教程

    android studio apk第三方加固与签名,混淆打包 https://jingyan.baidu.com/article/f25ef2545386af482c1b828f.html Andr ...

  8. webpack项目打包配置

    webpack.config.js 文件中,其中“plugins”最为重要 var path = require("path"); const webpack = require( ...

  9. javascript OOP(下)(九)

    一.javascript模拟重载 java中根据参数类型和数量的区别来实现重载,javascript弱类型,没有直接的机制实现重载,javascript中参数类型不确定和参数个数任意,通过判断实际传入 ...

  10. combination sum(I, II, III, IV)

    II 简单dfs vector<vector<int>> combinationSum2(vector<int>& candidates, int targ ...