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. UVA 11731 Ex-circles （外切圆）

    题意:给你三角形的三条边,求图中DEF的面积和阴影部分的面积. 题解:一些模板,三角形的旁切圆半径:.与 三旁心为 #include<set> #include<map> #i ...

  2. 【FINAL】NOI

    我就是复习一下..根本就不是什么题解...谁也看不懂的... NOI2007 社交网络         最短路 货币兑换         斜率优化动态规划 项链工厂         线段树 生成树计数 ...

  3. SSIS之序列容器

    序列容器是一种十分简单,但使用非常广泛的容器,它可以对控制流的任务流组件进行结构化处理,把一些业务相关的任务组件,放到一个序列容器中,使整个包看起来更加整洁.美观,就如同我们家里的书柜.衣柜似的,把不 ...

  4. QT Creator引用win32 api类库方法（.lib）

    由于Qt Creator使用的是mingW进行程序编译,该编译方式无法识别#pragma comment(lib,"lib\\hvdailt.lib")引用. 所以需要在.Pro文 ...

  5. python字典中dict.get()和dict.setdefault()的异同点

    相同点: 两者是参数相同:dict.get(key, default=None), dict.setdefault(key, default=None) 如果指定的键不存在时,两者都返回默认值,默认是 ...

  6. 初学者的Node.js学习历程

    废话篇: 对于我这个新手的不能再白菜的人来说,nodejs的大名都有耳闻,所以说他是一项不可不克服的技能也是可以说的.但是之前没有搞清楚的情况之下胡乱的猜测,是的我对node.js没有一个具体的概念的 ...

  7. eclipse提交Git时忽略文件

    为了避免每次使用都有百度查找,自己保存一份,方便使用. 实现方式: Eclipse切换到Navigator视图,找到.gitignore文件(如果是maven项目,一般找作为modules的项目的.g ...

  8. SCM-MANAGER 应用

    什么是SCM-MANAGER 基于Web的,集成了  Git. Mercurial .Subversion  多种代码管理工具的源代码管理平台 它有什么优点 简易安装 不需要破解配置文件,完全可配置的 ...

  9. GUID在.net里的使用

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  10. 让人蛋疼的“Oracle.DataAccess.dll”

    项目介绍:为前台网站提供rest接口来操作erp相关数据 涉及db:oracle11 技术方案:因为erp是用remoting来调用,我想rest实现部分调用remoting来操作减少耦合,当然性能上 ...