跨域请求两种方法 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 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
浅谈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
将PHP作为Shell脚本语言使用
2006/10/09 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
详解JavaScript树结构
2017/01/09 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
django框架cookie和session用法实例详解
2019/12/10 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
用python制作个音乐下载器
2021/01/30 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
幼儿园大班教学反思
2014/02/10 职场文书
食堂标语大全
2014/06/11 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
音乐剧猫观后感
2015/06/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
Mysql数据库命令大全
2021/05/26 MySQL