由"跨域"引出的一个终极思想(jsonp)
1.什么是跨域?
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域. 跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,但是因为浏览器存在一个"同源策略",结果就被浏览器拦截了。
举个例子:当一个页面中存在js或者jq的ajax请求,当该请求与当前域中的协议、子域名、主域名、端口号中任意一个不相同时,都是跨域,
最后再简单来说:浏览器具有“同源策略”,即:因为浏览器存在一个"同源策略",浏览器只能想当前所在的域发送Ajax,如果向其他域发送请求,则浏览器就会报错。
2.处理跨域的两种方法
解决办法有两个:
cors方法:
这个方法是一个主流方法,通过设置响应对象的响应头,去强制允许浏览器接受跨域的响应对象
def api (request) : ret : = HttpResponse('百度') ret["Access-Control- Allow -Origin"] = "*” #设置响应对象的响应头,接受任何跨域响应对象 return ret
jsonp:这是一种思想,不是处理跨域问题的最好方法,绝对的爆炸思想
- 一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签)。
- 精华在第三部分!
3.终极思想(精华部分)
再次声明: jsonp这是一种思想,不是解决跨域的最好办法,只是一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签)。但是这个思想是真的牛逼,一起来看
- 首先想一下跨域的根本原因:因为浏览器存在一个"同源策略",浏览器只能想当前所在的域发送Ajax,如果向其他域发送请求,则浏览器就会报错。
- 浏览器存在同源策略
- 阻止请求的响应对象
3.1 js跨域示例:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 同源请求
function sendMsg1() {
$.ajax({
url:'/msg/',//默认端口8000
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
// 跨域请求
function sendMsg2() {
$.ajax({
url:'http://127.0.0.1:9000/api/',
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
</script>
跨域请求触发时报错:
重点来了,到了这不知道你有没有留意一点,ajax的请求的响应对象虽然被拦截了,但是所引用的jquery源<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
依然生效! 天呐,ajax是跨域,jquery就不是?也是!因为当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域!但是为什么没有拦截我的jquery呢?
- 因为
src
拥有"同源策略"的通行证!,也就是同源策略不会拦截src属性的请求响应对象
既然是这样,那如果我在<script>
标签的src中写入一个我的请求url呢? 搞事情!
3.2 jsonp绕过同源策略示例
- 因为
src
拥有"同源策略"的通行证!,也就是同源策略不会拦截src属性的请求响应对象
// 前端页面
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 同源请求
function sendMsg1() {
$.ajax({
url:'/msg/',
type:'GET',
success:function (arg) {
console.log(arg);
}
})
}
// 依旧跨域
function sendMsg2() {
var tag = document.createElement('script'); //创建一个script标签
tag.src = 'http://127.0.0.1:9000/api/?callback=f1'; //更改src属性
document.head.appendChild(tag); // 添加到head中
document.head.removeChild(tag); //删除该标签
}
function f1(arg) { // 请求响应完毕后,要执行的函数
console.log(arg);
}
</script>
# 目标域的api接口
def api(request):
func_name = request.GET.get('callback')
return HttpResponse('%s("百度")' %func_name) # 灵活接受前端的参数,并将该参数和数据一起返回
呼~创建一个script标签, 更改src属性,添加到head中,删除该标签,一气呵成,完美跨域!
- 创建一个
script
标签,更改src:
在跨域请求出发时,创建一个script标签,并将src的值赋值为要请求的url,并动态设置参数callback=f1,f1是为了返回对象后执行定义的f1函数,出发自定义的动作
将自定义的script标签添加到head中
将自定义的script标签添加到head中后,script标签就会根据url请求一个js文件,并按照javascript的方式执行,也就是去url请求一个响应对象,也就是 f1("百度"),你是不是想到了什么?没错,如果在此时你定义了 function f1(arg) { console.log(arg); } 这么一个函数,这个函数就会被执行,那么跨域的问题不就解决了,也就是可以任你摆布了
删除该标签
在head添加了script标签,得到f1("百度")后f1函数会立即执行,防止多次请求head中script标签过多,删了就行!
大功告成!
- 不过呢jsonp只能发get请求,
小结
浏览器的"同源策略"不会拦截src的请求响应,通过该机制就可以绕过浏览器的同源策略.
再重复一次:jsonp一个解决跨域的方案,是一种巧妙的机制,可以绕过浏览器的同源策略,实现跨域(动态创建script标签).这是一种思想一种机制.
原文地址:https://www.cnblogs.com/bigox/p/11610027.html
- 小案例(六):预测小偷行为(python)
- 小案例(五):销量预测(python)
- SQL:插入指定标识列的数据时候的小错误
- 逻辑回归与梯度下降详解
- 决策树(R语言)
- ExecuteReader在执行有输出参数的存储过程时拿不到输出参数
- CTF---Web入门第十三题 拐弯抹角
- 小案例(四):销售额下滑(python)
- 【最新TensorFlow1.4.0教程01】TF1.4.0介绍与动态图机制 Eager Execution使用
- 把插入的数据自动备份到另一个表中 ~ 语境:本地和服务器自动同步
- 数据分析小案例(三):调查问卷(python)
- CTF---Web入门第十六题 天下武功唯快不破
- 数据分析小案例(二):面包是不是变轻了(python)
- 数据分析小案例(一):商业街抽奖(python)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入理解排序算法
- 用nginx缓存静态文件
- 优雅的玩PHP多进程
- 聊一聊mycat数据库集群系列之双主双重实现
- Fast-SCNN的解释以及使用Tensorflow 2.0的实现
- 基于Spring Boot快速实现发送邮件功能
- 史上最全的vim快捷键文档/手册/大全/帮助/指南
- RPC详解
- 轻松学Pytorch – 行人检测Mask-RCNN模型训练与使用
- Linux的文本处理工具浅谈-awk sed grep
- 这样Review代码牛逼啦!
- FinDOM-XSS:一款针对DOM型XSS漏洞的快速扫描工具
- 使用Pycharm和跳板机 连接内网服务器
- CVE-2020-1313漏洞分析与利用PoC
- Linux用户登录日志查询 # 1 utmp、wtmp、btmp文件