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


Posted in Javascript onNovember 11, 2018

在网站后台跨域访问另一服务器时,若被访问服务器未设置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)
   }
  })
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
浅谈webpack+react多页面开发终极架构
Nov 11 #Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python创建临时文件和文件夹
2020/08/05 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
高一学生期末评语
2014/04/25 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers