博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jsonp实现跨域访问
阅读量:2225 次
发布时间:2019-05-09

本文共 2324 字,大约阅读时间需要 7 分钟。

同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。
示例
项目A:
==================================http://127.0.0.1:8001项目的index    
Title {
% csrf_token %}==================================http://127.0.0.1:8001项目的viewsdef index(request): return render(request,"index.html")def ajax(request): import json print(request.POST) return HttpResponse(json.dumps("hello"))

 项目B: 

==================================http://127.0.0.1:8002项目的index    
Title {
% csrf_token %}==================================http://127.0.0.1:8002项目的viewsdef index(request): return render(request,"index.html")from django.views.decorators.csrf import csrf_exempt@csrf_exemptdef SendAjax(request): import json return HttpResponse(json.dumps("hello2"))

 当点击项目1的按钮时,发送了请求,但是会发现报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:8002/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。

Jsonp

 借助script标签,实现跨域请求:

# =============================http://127.0.0.1:8001/index{
% csrf_token %}# =============================http://127.0.0.1:8002/from django.views.decorators.csrf import csrf_exempt@csrf_exemptdef SendAjax(request): import json print("++++++++") # dic={"k1":"v1"} return HttpResponse("func('yuan')") # return HttpResponse("func('%s')"%json.dumps(dic))

 

这其实就是JSONP的简单实现模式,或者说是JSONP的原型:创建一个回调函数,然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递,完成回调。

将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。

jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法

8001修改如下,8002不变

结果是一样的,要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个问号是内部自动生成的一个回调函数名。

此外,如果说我们想指定自己的回调函数名,或者说服务上规定了固定回调函数名该怎么办呢?我们可以使用$.ajax方法来实现

$.ajax

8001修改如下,8002不变
回调函数版

jsonp: 'callbacks'就是定义一个存放回调函数的键,jsonpCallback是前端定义好的回调函数方法名'SayHi',server端接受callback键对应值后就可以在其中填充数据打包返回了; 

jsonpCallback参数可以不定义,jquery会自动定义一个随机名发过去,那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。  

注意 JSONP一定是GET请求

跨域应用

转载于:https://www.cnblogs.com/iyouyue/p/8489711.html

你可能感兴趣的文章
帧框架frameset的用法总结
查看>>
java1.8中创建hashmap的初始化大小设置标准
查看>>
mark一下,service的实现层没有加@service注解。
查看>>
jq对象转换成js对象。已经jq的复合选择器。
查看>>
(一)alin‘s mysql学习笔记----概述
查看>>
(二)alin’s mysql学习笔记----mysql的存储引擎
查看>>
(三)alin’s mysql学习笔记----常用的join连接查询
查看>>
(四)alin’s mysql学习笔记----索引简介
查看>>
分布式系统中的幂等性的理解
查看>>
spring的注解开发中的常用注解(一)------@bean @Configuration @ComponentScan @Import @Scope @Lazy
查看>>
(五)alin’s mysql学习笔记----索引性能分析
查看>>
Spring中使用@Transactional注解进行事务管理的时候只有应用到 public 方法才有效
查看>>
springboot整合rabbitmq及rabbitmq的简单入门
查看>>
mysql事务和隔离级别笔记
查看>>
事务的传播属性(有坑点)自调用失效学习笔记
查看>>
REDIS缓存穿透,缓存击穿,缓存雪崩原因+解决方案
查看>>
动态代理实现AOP
查看>>
23种常见的java设计模式
查看>>
关于被final修饰的基本数据类型一些注意事项
查看>>
java Thread中,run方法和start方法的区别
查看>>