views.py

def get_data(request):

    return HttpResponse("机密数据")

urls.py

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^(?P<version>\w+)/users/$', views.UsersView.as_view(),name='xxxx'),

    url(r'^index/',views.IndexView.as_view()),

    url(r'^get_data.html$', views.get_data),

]

In [2]: import requests

In [3]: res=requests.get('http://127.0.0.1:8001/get_data.html')

In [4]: res

Out[4]: <Response [200]>

In [5]: res.text

Out[5]: '机密数据'

通过发送requests请求时无限制

通过axios ajax 浏览器会限制返回

Failed to load http://127.0.0.1:8001/get_data.html:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

绕过浏览器的同源策略 即只能在当前域发请求，跨域就被浏览器限制

ajax受同源策略限制 但是有src属性的标签不受同源策略

img,script,iframe[伪造ajax请求],

<iframe src="http://www.autohome.com.cn" style="weight:'1000px';height:'2000px'"></iframe>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://127.0.0.1:8001/get_data.html"></script>

</head>

但是会提示错误

get_data.html:1 Uncaught ReferenceError: 机密数据 is not defined

    at get_data.html:1

1修改服务端

def get_data(request):

    return HttpResponse("alert(1)")

结果

客户端成功执行alert(1)

可以拿到数据但是没法使用

2.jsonp方式

手动版

客户端:先定义函数

服务端func('数据')

服务器端views code

def get_data(request):

    return HttpResponse("func('机密数据')")

客户端index.html

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function func (arg) {

            console.log(arg)

        }

    </script>

    <script src="http://127.0.0.1:8001/get_data.html"></script>

</head>

可以拿到数据

手动实现jsonp

函数名由客户端决定

服务端

def get_data(request):

    func_name=request.GET.get("callback")

    return HttpResponse("%s('机密数据')" %func_name)

客户端

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

<input type="button" onclick="jsonp('http://127.0.0.1:8001/get_data.html?callback=func')" value="发送jsonp请求"/>

<body>

<script src="../static/jquery-3.2.1.js"></script>

<script>

function func(arg) {

    alert(arg);

     document.head.removeChild(tag);

}

function jsonp(url) {

    tag= document.createElement('script')

    tag.src=url;

    document.head.appendChild(tag);

}

</script>

</body>

</html>

3jquey默认支持jsonp

本质就是动态创建script标签

返回函数名 服务端自动包裹数据

客户端

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

<input type="button" onclick="Jsonp2()" value="发送jsonp2请求"/>

<body>

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

<script>

function test(arg) {

}

function Jsonp2() {

    $.ajax({

        url:"http://127.0.0.1:8001/get_data.html",

        type:"GET",

        dataType:'JSONP',

{#        callback:test#}

        success:function (data) {

            console.log(data);

        }

    })

}

</script>

</body>

</html>

4客户端调整

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<h1>测试跨域</h1>

{#<input type="button" onclick="jsonp('http://127.0.0.1:8001/get_data.html?callback=func')" value="发送jsonp请求"/>#}

<input type="button" onclick="Jsonp2()" value="发送jsonp2请求"/>

<input type="button" onclick="Jsonp3()" value="发送jsonp3请求"/>

<body>

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

<script>

function list(arg) {

 console.log(arg)

}

function Jsonp3() {

    $.ajax({

        url:"http://www.jxntv.cn/data/jmd-jxtv2.html",

{#        http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list#}

        type:"GET",

        dataType:'JSONP',

        jsonp:'callback',

        jsonpCallback:'list'

    })

}

</script>

</body>

</html>

　　

jsonp实现跨域请求的本质demo[无法发送post请求]的更多相关文章

  1. 关于使用Jsonp做跨域请求

    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. 使用jsonp进行跨域请求

    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...

  3. jsonp原理,跨域请求头处理

    一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...

  4. 跨域解决方案二：使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  5. 转（JSONP处理跨域事件）

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  6. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

  7. JSONP解决跨域问题，什么是JSONP（转）

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  8. 用jsonp 解决跨域问题

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 将获取的txt 文件 展示出 ...

  9. jsonp 实现跨域

    为什么会出现跨域问题 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面 ...

随机推荐

  1. 内核编译错误解答(elf_i386错误)

    内核编译错误解答(elf_i386错误) 在编译内核过程中遇到的问题及解决方法: 1.root@org:/usr/src/linux# make menuconfig  *** Unable to f ...

  2. .net如何解析二维码图片

    二维码现在越来越流行,可以使用手机上或其它移动终端上的二维码扫描器软件对着二维码一扫,就可以得到相关信息.在互联网站上,可以找到很多二维码的工具,甚至还有不少在线生成.解析二维码的网站.在业务系统当中 ...

  3. Linux01

    Linux的特点 1.免费的/开源 2.支持多线程./多用户的(这是操作系统性能的重要指标) 3.安全性好 4.对内存和文件管理优越. 1999年,IBM宣布与Redhat公司建立伙伴关系. Linu ...

  4. canvas绘制多角形小练习

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ThreadPool(线程池）

    WPF使用ThreadPool.QueueUserWorkItem线程池防界面假死 时间:2012-01-09 20:44来源:http://luacloud.com 作者:luacloud 点击:1 ...

  6. hdu 2490 队列优化dp

    http://acm.hdu.edu.cn/showproblem.php?pid=2490 Parade Time Limit: 4000/2000 MS (Java/Others)    Memo ...

  7. iostat相关参数说明——await：平均每次设备I/O操作的等待时间 (毫秒)，如果%util接近 100%，说明产生的I/O请求太多

    iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出 CPU使用情况.同vmstat一样, ...

  8. LSTM与Highway-LSTM算法实现的研究概述

    LSTM与Highway-LSTM算法实现的研究概述 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2015-12-22 ...

  9. kylin_异常_01_java.io.FileNotFoundException: /developer/apache-kylin-2.3.0-bin/tomcat/conf/.keystore

    一.异常现象 kylin安装完,启动后,控制正常,kylin后台也能正常访问.但是去看kylin的日志,却发现报错了: SEVERE: Failed to load keystore type JKS ...

  10. KVM-环境安装

    1.操作系统安装 本文采用Centos6.4X64操作系统,也可以采用RHEL/CentOS6.x. (1)查看系统版本.内核版本 ##查看系统版本 [root@KVM ~]# cat /etc/re ...