同源策略jsonp和cors
同源策略:
同源策略(Same origin policy)是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
=================http://127.0.0.1:8001项目的index============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body> <button>ajax</button>
{% csrf_token %} <script>
$("button").click(function(){
$.ajax({
url:"http://127.0.0.1:8002/SendAjax/",
type:"POST",
data:{"username":"man","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
success:function(data){
alert(123);
alert(data);
}
})
})
</script>
</body>
</html>
项目2
==================http://127.0.0.1:8002项目的index================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body> <button>sendAjax</button>
{% csrf_token %} <script>
$("button").click(function(){
$.ajax({
url:"/SendAjax/",
type:"POST",
data:{"username":"man","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
success:function(data){
alert(data)
}
})
})
</script> </body>
</html> ===================http://127.0.0.1:8002项目的views==================== def index(request):
return render(request,"index.html")
from django.views.decorators.csrf import csrf_exempt @csrf_exempt
def SendAjax(request): # 不校验csrf_token
import json
return HttpResponse(json.dumps("hello2"))
当点击项目1的按钮时，发送了请求，但是会发现报错如下：
已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8002/SendAjax/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
如何解决同源策略实现跨域请求
使用script标签来完成跨域请求 原理是通过script标签的跨域特性来绕过同源策略。
# =============================http://127.0.0.1:8001/index <button>ajax</button>
{% csrf_token %} <script>
function func(name){
alert(name)
}
</script> <script src="http://127.0.0.1:8002/SendAjax/"></script> # =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt @csrf_exempt def SendAjax(request):
import json
# dic={"k1":"v1"}
return HttpResponse("func('param')") # return HttpResponse("func('%s')"%json.dumps(dic))
使用jsonp来实现跨域请求
================http://127.0.0.1:8001/index=== <button class="get_index" onclick=f()>洗剪吹</button>
<srcipt>
function ret(arg) {
console.log(arg)
}
$(".get_index").click(function () {
$.ajax({
url:"http://127.0.0.1:8002/index/",
type:"get",
dataType:"jsonp", // 伪造ajax 基于script
jsonp: 'callbacks',
//jsonpCallback:"ret",
success:function (data) {
console.log(data)
}
})
})
</srcipt>
=================127.0.0.1:8002/index====
def index(request): # jsonp
func=request.GET.get("callbacks")
# print("func",func)
info={"name":"man","age":34,"price":200}
return HttpResponse(" ('%s')"%(func,json.dumps(info)
jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'ret'，server端接受callback键对应值后就可以在其中填充数据打包返回了;
jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。
jsonp应用
$(".get_index").click(function () {
$.ajax({
url:"http://www.jxntv.cn/data/jmd-jxtv2.html",
type:"get",
dataType:"jsonp", // 伪造ajax 基于script
jsonp: 'callbacks',
jsonpCallback:"list",
success:function (data) {
//console.log(data.data);
var html="";
$.each(data.data,function (index,weekday) {
console.log(weekday); // {week: "周一", list: Array(19)}
html+='<p>'+weekday.week+'</p>';
$.each(weekday.list,function (j,show) {
html+= '<p><a href='+show.link+'>'+show.name+'</a></p>'
})
});
$("body").append(html)
}
})
})
使用cors来实现跨域请求
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
============127.0.0.1:8001=====
$(".get_service").click(function () {
$.ajax({
url:"http://127.0.0.1:8008/service/",
success:function (data) {
console.log(data)
}
})
}) ==============127.0.0.1:8002======
def service(request):
info = {"k1":"v1","k2":"v2"}
responce = HttpResponce(json.dumps(info))
responce["Access-Control-Allow-Origin"] = "http://127.0.0.1:8001"
responce["Access-Control-Allow-Origin"] = "*" #表示所有访问通过
return responce
同源策略jsonp和cors的更多相关文章
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- 同源策略 - JSONP - CORS
1. Jquery 对象可以通过 .index() 进行取出自当前元素在父级元素中存放的索引: 2. 浏览器的同源策略 -- Ajax 在访问非本网站的时候,在数据返回的时候,会被浏览器拦截 - 后 ...
- 同源策略 & 高效调试CORS实现
# 目录 为什么有同源策略? 需要解决的问题 CORS跨域请求方案 preflight withCredentials 附:高效.优雅地调试CORS实现 ----------------------- ...
- Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题，但ajax提交有跨域问题？ XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求（preflight request）
https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
- [oldboy-django][2深入django]浏览器同源策略 + JSONP + cros
浏览器的同源策略: - 同源: 同方法,同域名,同端口 http://www.baidu.com:8000 http: 方法 www.baidu.com: 域名 8000: 端口 - 定义 网上解析非 ...
- Apache2 同源策略解决方案 - 配置 CORS
什么是同源策略 现在的浏览器大多配有同源策略(Same-Origin Policy),具体表现如下: 浏览某一网站,例如 http://www.decembercafe.org/.这个网页中的 Aja ...
- 同源策略 JSONP（实践篇）
JSONP详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. ...
- [CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
- 关于安全性问题：（XSS,csrf,cors,jsonp,同源策略）
关于安全性问题:(XSS,csrf,cors,jsonp,同源策略) Ajax 是无需刷新页面就能从服务器获取数据的一种方法.它的核心对象是XHR,同源策略是ajax的一种约束,它为通信设置了相同的协 ...
随机推荐
- js侧边菜单
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...
- CF618G（利用浮点数精度+矩乘优化DP）
这题真的太神辣,%了一发题解,原来还能这么搞QWQ 设\(A_{i,j}\)表示不加任何限制时,第\(i\)个格子会出现权值为\(j\)的史莱姆的概率,则有: \[A_{i,j}=A_{i,j-1}* ...
- EOJ 306 树上问题
题解: 因为w大于1,所以,题意就是,有多少(x,z),存在x到z的路径上,有一个x<y<z的y w没用的其实. 树上路径问题,有什么方法吗? 1.树链剖分.这个主要方便处理修改操作. 2 ...
- deepin安装mysql记录
本文转载自http://www.linuxidc.com/Linux/2016-07/133128.htm sudo apt-get install mysql-server apt-get isnt ...
- 第十二节：Lambda、linq、SQL的相爱相杀(1)
一. 谈情怀 Lambda.Linq.SQL伴随着我的开发一年又一年,但它们三者并没有此消彼长,各自占有这一定的比重,起着不可替代的作用. 相信我们最先接触的应该就是SQL了,凡是科班出身的人,大学 ...
- [好文mark] 深度学习中的注意力机制
https://cloud.tencent.com/developer/article/1143127
- pytorch对可变长度序列的处理
主要是用函数torch.nn.utils.rnn.PackedSequence()和torch.nn.utils.rnn.pack_padded_sequence()以及torch.nn.utils. ...
- linux select 与 阻塞( blocking ) 及非阻塞 (non blocking)实现io多路复用的示例【转】
转自:https://www.cnblogs.com/welhzh/p/4950341.html 除了自己实现之外,还有个c语言写的基于事件的开源网络库:libevent http://www.cnb ...
- 【原创】大叔问题定位分享（13）HBase Region频繁下线
问题现象:hive执行sql报错 select count(*) from test_hive_table; 报错 Error: java.io.IOException: org.apache.had ...
- thymeleaf的onclick标签传参异常
转自https://my.oschina.net/u/2312080/blog/2878183 异常 严重: Servlet.service() for servlet [DispatcherServ ...