jsonp原理,跨域请求头处理
一.jsonp(解决跨域)思路介绍:
因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内,
其在发送请求后会自动接收返回的东西,所以我们可以给要返回的内容进行特殊的处理;具体做法:
1. 使用个变量加括号的形式,把要返回的内容放入括号内
列如: return HttpResponse( "handlerResponse('返回内容')" )
2. 在html页面script标签对内放置个函数,让函数名等同于后端传来的变量名即可
function handlerResponse(data) { # data参数接收的就是后端真正想要返回的内容.
// do something....
alert(data)
}
3. 原理: 前端src出接收到的内容就是handlerResponse('返回内容')这种形式,而html页面内又定义了
handlerResponse为一个函数名,加括号就是调用的形式,正好会把其所要传送的东西以参数的形式被
data所接收,此时在函数内操作处理即可.
缺点: jsonp只能发送get请求,无法处理post请求,且get请求时无法指定contentytype等
二.加请求头方式:
我们先了解下跨域请求的分类(简单和复杂):
HTTP方法是下列方法之一
HEAD, GET,POST
HTTP头信息不超出以下几种字段
Accept, Accept-Language, Content-Language, Last-Event-ID
Content-Type只能是下列类型中的一个
application/x-www-from-urlencoded # form表单提交数据
multipart/form-data # 权限类型
text/plain # 文本类型
任何一个不满足上述要求的请求,即会被认为是复杂请求~~
复杂请求会先发出一个预请求,我们也叫预检,即OPTIONS请求~~
原理,在请求返回给浏览器前,给响应内容加上头部信息,让浏览器放行即可.
from django.utils.deprecation import MiddlewareMixin
class MyCors(MiddlewareMixin):
def process_response(self, request, response):
response["Access-Control-Allow-Origin"] = "*" # 放行所有简单请求
if request.method == "OPTIONS":
# 复杂请求会先发预检
response["Access-Control-Allow-Headers"] = "Content-Type" # 内容类型
response["Access-Control-Allow-Methods"] = "PUT,PATCH,DELETE" # 复杂请求方式
return response
最新文章
- Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏
- Javascript.ReactNative-2-javascript-syntax-in-react-native
- javascript密码强度验证!
- Redis数据持久化之AOF持久化
- 构件图 Component Diagram
- iOS开发之网络篇-CocoaPods的安装 EI Capitan 10.11 之前的方式
- Google Chrome浏览器的使用方法
- linux 分割文件
- 设计模式(三)-- 适配器模式(Adapter)
- ng-class改变css样式
- FPGA在其他领域的应用(三)
- HBase BlockCache
- 微软将把Windows Defender防火墙传递给 Linux 子系统
- 【原创】研发应该懂的binlog知识(下)
- 获取ip地址&;&;测试ip地址
- 牛客网第二场Jfarm(随机化+二维前缀和)
- HoloLens开发手记 - 使用配件 Working with accessories
- 自学Linux Shell7.2-linux文件权限
- sublime使用经验汇总
- 25个Linux相关的网站
热门文章
- Unity Shader 序列帧动画
- FutureTask源码
- [转帖]CHROME开发者工具的小技巧
- Java SPI机制:ServiceLoader实现原理及应用剖析
- Mysql插入text类型字段错误记录 com.mysql.jdbc.MysqlDataTruncation: Data truncation: #22001
- W tensorflow/core/util/ctc/ctc_loss_calculator.cc:144] No valid path found 或 loss:inf的解决方案
- KVM 学习笔记
- 活动任务出现bug
- OKGo vs RxHttpUtils ...
- JavaWeb 分层设计、MVC