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
jsonp原理,跨域请求头处理的更多相关文章
- 关于使用Jsonp做跨域请求
今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 使用jsonp进行跨域请求
使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
- nodeJS中express框架设置全局跨域请求头
//设置跨域请求头 router.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin&qu ...
- 利用JSONP实现跨域请求
前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...
- mvc中使用jsonp进行跨域请求详细说明
在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...
- CORS和jsonp实现跨域请求
同源策略:所谓同源是指,域名,协议,端口相同,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略.当浏览器同时打开两个tab页面(两个不同服务器 ...
- 来说说SpringMVC + JSONP的跨域请求
先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...
- 不用jsonp实现跨域请求
这几天要用到跨域请求,我在网上找了好多资料,最后自己研究出来一个比较简单方便的, 请求的过程和jquery普通的ajax一样.我用的是.net平台 ,IIS7.5 来看一下后台的代码,我是用MVC的C ...
- Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
随机推荐
- WPF DataGrid 自定义样式 MVVM 删除 查询
看到很多小伙伴在找Dategrid样式 就分享一个 ,有不好的地方 请指出 代码部分都加了注释 需要的可以自己修改为自己需要的样式 源码已经上传 地址: https://github.com/YC ...
- Java8 新特性 Steam() 中间有状态操作
中间有状态操作 Java8 新特性 Stream 练习实例 中间操作,就是把数据处理成自己想要的类型,并且有状态操作,是在所有的数据基础上进行操作的.比如dictinct(去重),sorted(排 ...
- Java8 LocalDateTime和Date相互转换
很想要用Java的时间api,但有时候还是需要转换为Date. 二者的相互转换并不是一步到位那么简单,所以,还是需要记录一下转换的api Date to LocalDateTime Date toda ...
- [sonarqube的使用] sonarlint在idea&eclipse中安装与使用
介绍 代码质量管理的开源平台,用于管理源代码的质量 通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言的代码质量管 ...
- SpringBoot 通过jjwt快速实现token授权
A 10分钟了解JSON Web令牌(JWT)https://baijiahao.baidu.com/s?id=1608021814182894637&wfr=spider&for=p ...
- window.postMessage()实现跨域消息传递
window.postMessage() 方法可以安全地实现跨源通信.通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https), 端口号(443为https的默认值), ...
- C#实现高性能高并发Socket服务器
1.高并发服务器实现一 本文转载 转载地址 2.高并发服务器实现二 本文转载 转载内容在于学习C#实现的高并发服务器 以下个人观点 1 需要注意SocketAsyncEventArgs的使用 2 做到 ...
- 调试 Go 的代码生成
原文:https://studygolang.com/articles/19815 这是一个创建于 2019-04-17 23:12:26 的文章,其中的信息可能已经有所发展或是发生改变. 2016 ...
- EurekaClient自动装配及启动流程解析
在上篇文章中,我们简单介绍了EurekaServer自动装配及启动流程解析,本篇文章则继续研究EurekaClient的相关代码 老规矩,先看spring.factories文件,其中引入了一个配置类 ...
- 2019-08-26 linux
1.question:什么是linux? answer:Linux由林纳斯·托瓦兹开发的一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU ...