jsonp实现跨域请求的本质demo[无法发送post请求]
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请求]的更多相关文章
- 关于使用Jsonp做跨域请求
今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 使用jsonp进行跨域请求
使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
- jsonp原理,跨域请求头处理
一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...
- 跨域解决方案二：使用JSONP实现跨域
跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...
- 转（JSONP处理跨域事件）
前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
- 使用JSONP实现跨域
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...
- JSONP解决跨域问题，什么是JSONP（转）
原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...
- 用jsonp 解决跨域问题
想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 将获取的txt 文件 展示出 ...
- jsonp 实现跨域
为什么会出现跨域问题 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面 ...
随机推荐
- SpringCloud-分布式配置中心(config)
简介 在分布式文件系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...
- print webpage
使用浏览器打印网页时(A4纸)有一个固定的尺寸: 高级浏览器: width:700px height:1000px
- Python爬虫之利用BeautifulSoup爬取豆瓣小说（一）——设置代理IP
自己写了一个爬虫爬取豆瓣小说,后来为了应对请求不到数据,增加了请求的头部信息headers,为了应对豆瓣服务器的反爬虫机制:防止请求频率过快而造成“403 forbidden”,乃至封禁本机ip的情况 ...
- MySQL 大数据量修改表结构问题
前言: 在系统正常运作一定时间后,随着市场.产品汪的需求不断变更,比较大的一些表结构面临不得不增加字段的方式来扩充满足业务需求: 而 MySQL 在体量上了千万.亿级别数据的时候,Alter Tab ...
- URL OpenDocument
以前用在DASHBOARD 使用URL传参 到webi 报表.还是很多不理解,现在明白多了.于是做个较为详细的记录.尽管dashboard 很快就被淘汰了.也许没什么用.看看也好. 之前的报表,传参都 ...
- UVA - 11754 Code Feat (分块+中国剩余定理)
对于一个正整数N,给出C组限制条件,每组限制条件为N%X[i]∈{Y1,Y2,Y3,...,Yk[i]},求满足条件的前S小的N. 这道题很容易想到用中国剩余定理,然后用求第k小集合的方法输出答案.但 ...
- 【bzoj4987】Tree 树形背包dp
题目描述 从前有棵树. 找出K个点A1,A2,…,Ak. 使得∑dis(AiAi+1),(1<=i<=K-1)最小. 输入 第一行两个正整数n,k,表示数的顶点数和需要选出的点个数. 接下 ...
- 每天一个linux命令（15）：head命令
版权声明更新:2017-05-19博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...
- Entity Framework中AutoDetectChangesEnabled為false時更新DB方法
Entity Framework初始化時執行: Configuration.AutoDetectChangesEnabled = false; 會將數據庫變為NotTrack模式,也就是不會自動同步对 ...
- 5.7 Windows常用网络命令
5.7 Windows常用网络命令 •ping •netstat •winipcfg/ipconfig •tracert •route 5.7.1 ping命令 •功能 –它是用来检查网络是否通畅或者 ...