最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

跨域请求两种方法 jsonp和cors的实现

来源:动视网 责编:小采 时间:2020-11-27 22:04:02
文档

跨域请求两种方法 jsonp和cors的实现

跨域请求两种方法 jsonp和cors的实现:在网站后台跨域访问另一服务器时,若被访问服务器未设置response[Access-Control-Allow-Origin'] = *' 那么将无法获取。 jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 。 //向html中加入script标
推荐度:
导读跨域请求两种方法 jsonp和cors的实现:在网站后台跨域访问另一服务器时,若被访问服务器未设置response[Access-Control-Allow-Origin'] = *' 那么将无法获取。 jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 。 //向html中加入script标


在网站后台跨域访问另一服务器时,若被访问服务器未设置response[‘Access-Control-Allow-Origin'] = ‘*' 那么将无法获取。

jsonp方法

伪造ajax提交请求

请求端

 // 基于jsonp
 // 原理: ajax 不能直接跨域 。 
 //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果
 $('.get_service2').click(function () {

 // 伪造ajax提交请求
 $.ajax({
 url:'http://127.0.0.1:8001/service/',
 type: 'get',
 dataType: 'jsonp', // 伪造ajax 基于script
 jsonp: 'callbacks',
 // 随机取一个函数名发给请求方,对方解析好后返回过来
 success: function (data) {
 console.log(data)
 }
 })

 });

服务端

import json

def service(request):
 # 等待请求返回json数据
 func = request.GET.get('callbacks') # 固定方法名jsonp
 info = {'name': 'zok', 'age': 18}

 return HttpResponse("%s('%s')" % (func, json.dumps(info)))

jsonp获电视台节目案例

取到后并渲染到页面上

// 实例基于jsonp 电视台节目获取
 $('.get_service3').click(function () {

 // 伪造ajax 基于script
 $.ajax({
 url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
 type: 'get',
 dataType: 'jsonp', // 伪造ajax 基于script
 jsonp: 'callbacks',
 jsonpCallback: 'list', // 拼函数名,如果不写就随机发一个函数名,对面解析好发回来

 success: function (data) {
 var html=""; //自己拼接

 // 循环取出数据 index 索引计次,weekday 每一天 必须要2个参数
 $.each(data.data,function (index, weekday) {
 //取到每天的数据
 html+='<p>'+weekday.week+'</p>';
 $.each(weekday.list,function (i,show) {
 html+='<a href='+show.link+'>'+show.name+'</a></br>'
 })
 });
 $('body').append(html)
 }
 })
 })

cors 最简单的方法

需要在服务端上加入白名单ponse[‘Access-Control-Allow-Origin'] = ‘*' 设置好能正常传送的ip

服务端

def serviceCors(request):
 """
 基于cors跨域
 白名单域名
 """
 info = {'name': 'zok', 'age': 18}
 response = HttpResponse(json.dumps(info))
 # 设置指定ip 或 * 全部通过
 response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8000' 
 response['Access-Control-Allow-Origin'] = '*'
 return response

请求端

 // cors 跨域请求,方法最简单
 $('.get_service1').click(function () {
 $.ajax({
 url:'http://127.0.0.1:8001/serviceCors/',
 type:'get',
 success:function (data) {
 console.log(data)
 }
 })
 });

文档

跨域请求两种方法 jsonp和cors的实现

跨域请求两种方法 jsonp和cors的实现:在网站后台跨域访问另一服务器时,若被访问服务器未设置response[Access-Control-Allow-Origin'] = *' 那么将无法获取。 jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 。 //向html中加入script标
推荐度:
标签: 请求 跨域 jsonp
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top