[oldboy-django][2深入django]浏览器同源策略 + JSONP + cros
浏览器的同源策略：
- 同源： 同方法，同域名，同端口
http://www.baidu.com:8000
http: 方法
www.baidu.com： 域名
8000： 端口
- 定义
网上解析非常好的一篇
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
- 限制 ajax只能发给同源的网址；
限制原理：
浏览器request--->跨域服务器
浏览器阻止接收<----跨域服务器响应, 服务器已经做出响应了，而且返回了，只是浏览器阻止接收 - 解决策略JSONP
它的基本思想是，网页通过添加一个<script>元素，请跨域请求放在src属性上
向服务器请求JSON数据
(注意数据是json，数据是通过回调函数的参数传递回来的，
所以参数必须是经过json话
)
这种做法不受同源政策限制；
服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。 JSONP需求：向其他网站发送http请求
- 解决办法：浏览器直接发送请求（到访问其他网站）--考虑浏览器同源
- 要求：
1. 客户端
- jsonp发送url, 把funname放到url中 url?callback=myfun
- 定义myfun函数 function myfun(arg) 2. 服务端
- 获取callback, fun_name = request.GET.get('callback')
- arg是请求，需要获取的数据，这个数据必须字符串或者是Json字符串
- 字符串 temp = '%s(%s)' %(fun_name, arg)
注意，如果arg是列表等类型要先arg = json.dumps(arg)
- 返回字符串
return HttpResponse(temp) ps: 不是特别必要
修改django settings.py里面的ALLOWED_HOSTS = ['http://www.s4.com'] 修改C:\Windows\System32\Drivers\etc\hosts里面的内容增加内容
127.0.0.1 www.s4.com
127.0.0.1 www.s5.com - 原理：
只要页面加载下面语句
<script src="http://www.s4.com:8001/user"></script>
内存中就会返回http://www.s4.com:8001/user页面内容，
并且将内容保存在内存中， 在页面的时候，会将内容当做Js渲染 当请求http://www.s4.com:8001/user?myfun=callback,
后台返回Json.dumps('myfun(arg)'),
存储在浏览器内存中，就相当于调用函数 myfun(arg),
因此，需要在前端定义callback(arg),这样就不需要考虑什么时候调用函数， 为了节省空间，一般绑定一个事件动态生成script标签，
function xxx(){
var tag = document.createElement('script')
tag.src = 'http://www.s4.com:8001/user?callback=myfun';
document.getElementByTag('head').appendChild(tag);
} function myfun(arg){
console.log(arg);
} # JSONP实例--动态创建script标签
# A网站前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <input type="button" value="jsonp" onclick="test_jsonp();"> <script>
function test_jsonp(){
var tag = document.createElement('script');
tag.src = 'http://127.0.0.1:8001/users?callback=get_users';
document.head.appendChild(tag);
} function get_users(arg){
alert(123);
console.log(arg)
}
</script>
</body>
</html> # B网站处理请求
url(r'^users', views.users),
def users(request):
fun_name = request.GET.get('callback')
user_list = json.dumps(['alex', 'egon', 'eric'])
temp = "%s(%s)" % (fun_name, user_list)
return HttpResponse(temp) # 用jQuery 封装JSONP,
# 主要是前端不同，其他的一一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取用户列表" onclick="getUsers();">
</body>
<script src="/static/js/jquery-1.12.4.js"></script>
<script>
function getUsers(){
$.ajax({
url: 'http://127.0.0.1:8001/users',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback', // 指定url传递参数名称
jsonpCallback: 'myFun' // 指定回调函数
})
// jsonp: 'callback', jsonCallback" :'myFun'
// 等效于将?callback=myFun加到url上
} function myFun(arg){
console.log(arg);
}
</script>
</html> # jQuery实现跨越的另一种方式$.getJSON(）
利用getJSON来实现，只要在地址中加上callback=?参数即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取用户列表" onclick="getUsers();">
</body>
<script src="/static/js/jquery-1.12.4.js"></script>
<script>
function getUsers(){
$.getJSON("http://127.0.0.1:8001/users?callback=?", myFun);
} function myFun(arg){
console.log(arg);
} </script>
</html> # 使用jsonp注意：
- 只能发get请求（生成script标签，里面的src肯定是get请求）
- 客户端和服务端做好约定
- jsonp是一项技术，方法；目的是解决跨域问题 # 解决跨域请求的另一种方式：cors : cross site
在响应增加一个响应头：Access-Control-Allow-Origin, 这样就允许ajax跨域发送请求.
浏览器看到这个消息头，就不会阻止接收跨域返回的响应
# 视图函数
obj = HttpResponse()
obj['Access-Control-Allow-Origin ']= '*'
# 或者obj['Access-Control-Allow-Origin ']= 'www.s4.com:8000'
return obj # cros解决浏览器阻止ajax跨域问题 --简单请求
- 实例
# 前端
<body>
<input type="button" value="cros支持ajax跨域发送请求" onclick="JsAjaxSend();">
</body>
<script src="/static/js/jquery-1.12.4.js"></script>
<script>
function JsAjaxSend() {
$.ajax({
url: 'http://127.0.0.1:8001/new_users',
type: 'GET',
success:function(arg){
console.log(arg)
}
})
}
</script> # http://127.0.0.1:8001/new_users视图函数
def new_users(request):
print('请求来了')
user_list = ['alex', 'egon', 'eric']
user_list_str = json.dumps(user_list)
obj = HttpResponse(user_list_str)
obj['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"
return obj # cros解决ajax跨域请求问题--复杂请求
复杂请求实际上发送了两个请求: OPTIONS,以及后面的复杂请求。
# 前端
function JsAjaxSend() { $.ajax({
url: 'http://127.0.0.1:8001/complicated_users',
type: 'DELETE',
success:function(arg){
console.log(arg)
}
})
} # 视图 --这里取消了csrf
def complicated_users(request):
if request.method == 'OPTIONS':
# 设置允许delete方法和浏览器接收跨域响应
obj = HttpResponse()
obj['Access-Control-Allow-Methods'] = 'DELETE'
obj['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"
return obj
else:
user_list_str = json.dumps(['eric', 'alex'])
obj = HttpResponse(user_list_str)
obj['Access-Control-Allow-Origin'] = "http://127.0.0.1:8000"
return obj # 如何区分复杂请求和简单请求
1、请求方式：HEAD、GET、POST
2、请求头信息：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain
注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求 # 参考博客
http://www.cnblogs.com/wupeiqi/articles/5703697.html
[oldboy-django][2深入django]浏览器同源策略 + JSONP + cros的更多相关文章
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- django csrf_protect及浏览器同源策略
1.django在检测post行为时会有诸多的限制. 为了防止跨域请求伪造安全 参考:http://www.qttc.net/201209211.html https://www.cnblogs. ...
- Django之跨域请求同源策略
同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过 ...
- jsonp突破浏览器同源策略
jsonp突破浏览器同源策略 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- [js]浏览器同源策略(same-origin policy)
浏览器的同源策略 浏览器同源政策及其规避方法 什么是同源策略 A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源".所谓"同源"指的是" ...
- 浏览器同源策略及Cookie的作用域
from:https://blog.csdn.net/wang379275614/article/details/53333054 如题,本文主要介绍两方面内容:首先简单介绍浏览器的同源策略与其带来的 ...
- 浏览器同源策略，跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- DRF项目之解决浏览器同源策略问题
DRF项目,是一个前后端分离的Web框架. 本项目中,我们前端采用的是VUE框架. 前后端分离的情况就会出现一个问题,前端的Ajax请求无法请求到后端API(接口). 那么,为什么会出现这种问题呢? ...
- 浏览器同源策略与ajax跨域方法汇总
原文 什么是同源策略 如果你进行过前端开发,肯定或多或少会听说过.接触过所谓的同源策略.那么什么是同源策略呢? 要了解同源策略,首先得理解“源”.在这个语境下,源(origin)其实就是指的URL.所 ...
随机推荐
- JavaScript getMonth() 方法
应该特别注意的是Js中getMonth()这个方法的返回值: 定义和用法: getMonth() 方法可返回表示月份的数字. 返回值: dateObject 的月份字段,使用本地时间.返回值是 0(一 ...
- 【BZOJ3172】[TJOI2013] 单词（AC自动机的小应用）
点此看题面 大致题意: 给你\(N\)个单词,请你求出每一个单词在这\(N\)个单词中出现的次数. 相关题目 这道题应该是洛谷上一道板子题的升级版. \(AC\)自动机 这是一道\(AC\)自动机的简 ...
- 2018.6.18 MyEclipse导入jquery-1.8.0.min.js等文件报错的解决方案
MyEclipse导入jQuery-1.8.0.min.js等文件的时候有时候会报了一堆missing semicolon的错误.怎么解决这个报错呢?方法如下: 1.选中报错的jquery文件例如&q ...
- 由一道CTF pwn题深入理解libc2.26中的tcache机制
本文首发安全客:https://www.anquanke.com/post/id/104760 在刚结束的HITB-XCTF有一道pwn题gundam使用了2.26版本的libc.因为2.26版本中加 ...
- Redis学习记录(三)
1.Redis集群的搭建 1.1redis-cluster架构图 架构细节: (1)所有的redis节点批次互联(PING-PONG机制),内部使用二进制协议优化传输速度和带宽. (2)节点的fail ...
- Nginx学习记录(二)
1. 什么是反向代理 正向代理 反向代理: 反向代理服务器决定哪台服务器提供服务. 返回代理服务器不提供服务器.也是请求的转发. 反向代理(Reverse Proxy)方式是指以代理服务器来接受Int ...
- Angular 2 树节点的上下移动问题
最近在做一个树节点的上下移动然后实现排序的问题.直接看图: 实现已选查询条件的上下移动.结合了primeng 的picklist 组件. 下面是html代码 <p-tabPanel header ...
- react安装极其了解
全局安装react脚手架工具 首先全局进行安装:cnpm install create-react-app -g 查看是否安装完成:create-react-app 创建react项目:create- ...
- js时间转换
1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 ...
- node.js express环境下中文需要注意的地方
问题一: 最近在nuxt项目中开始着手把一些跨域的请求转移到express里,其实跟其他语言差不多,http对象发请求,接收请求都写得很顺畅.之前用的请求部分大多数是get请求,所以除了注意编码问题之 ...