借助node实战JSONP跨域实例


Posted in Javascript onMarch 30, 2017

一、前言:

浏览器安全是基于同源策略的。所谓同源策略就是三相同:

1、协议相同;

2、域名相同;

3、端口相同。

但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP。

JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此);然后服务器将相应的数据放入指定的函数回调名中,返回给前端。

这,就实现了跨域请求信息。

如下图所示:

借助node实战JSONP跨域实例 

了解了JSONP的大体思路,接下来,我们借助node来搭建一个简单的服务器,与前端一步步实现JSONP带来的跨域请求之旅吧。

二、搭建node server:

因为前端要实现跨域请求,需要与后台配合。在这里,我们使用是node来模拟后台服务器。

So,你得对node有一定认识以及开发环境。

接下来,我们就编写一个简单的node服务器吧。

首先,我们需要引入http模块,因为是基于http请求的嘛。然后就是用其创建一个http服务器,如监听的是8080端口。

如下:

'use strict';
//通过require将http库包含到程序中
var http = require('http');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
  res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
  res.end('Hell World\n');  
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

接着,因为我们要对使用JSONP的请求与正常请求区分,所以,后台得判断处理—通过解析url字符串,假设这里我们是通过带有'/jsonp'的路径名来判断。

如下:

'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  //如果urlPath为'jsonp',就认定该请求为携带jsonp方法的http请求
  if(urlPath === '/jsonp'){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    //假设我们定义的回调函数名为test
    var callback = 'test'+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

在上面的代码中19行,有个缺点就是,我们将回调函数的名字规定死了,当我们判断请求为JSONP时,只能往前端传入test,这样显然不合理。

所以,我们得借助于querystring 这个模块,来处理query字符串。

如下:

'use strict';
//通过require将http库包含到程序中
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
  var urlPath = url.parse(req.url).pathname;
  var qs = querystring.parse(req.url.split('?')[1]);
  if(urlPath === '/jsonp' && qs.callback){
    res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
    var data = {
      "name": "Monkey"
    };
    data = JSON.stringify(data);
    var callback = qs.callback+'('+data+');';
    res.end(callback);
  }
  else{
    res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
    res.end('Hell World\n');  
  }  
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

这样,我们就将一个我们需要的服务器搭建好了。

服务器有了,接下来,就是前端跨域请求了。

三、JSONP跨域请求之旅:

因为我们是借助于<script>标签中的src来实现请求的,在服务器中已经约定,在请求后加入'/jsonp?callback',就将其认定为JSONP请求,且callback后带入一个js中已有的全局方法。

所以,代码可以如下:

<!DOCTYPE html>
  <head>
    <title>jsonp</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      function test(data){
        alert(data.name);
      };
    </script>
    <script src="http://127.0.0.1:8080/jsonp?callback=test"></script>
  </body>
</html>

好了,前后端都编码完毕,接下来,我们就看看效果吧。

首先启动node服务器,如下:

借助node实战JSONP跨域实例

注:我将我们搭建的服务器server.js放在D:/JSONP中

接下来,运行上面所写的html代码,可以发现请求成功,并执行test方法。

借助node实战JSONP跨域实例 

但,我们一进来,就得跨域请求,是否有点不妥,所以可以动态创建script元素,并指定相应请求,任由我们所为。

如下:

//动态创建script标签,并请求
function addScriptTag(src){
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.src = src;
  document.body.appendChild(script);
};
//如:在onload后,跨域请求
window.onload = function(){
  addScriptTag('http://127.0.0.1:8080/jsonp?callback=monkey');
};
//回调的方法,且必须为全局方法,不然会报错
function monkey(data){
  alert(data);
};

JSONP还需要注意的就是,回调函数的方法必须是全局的,不然会报错的,因为是通过script的src请求的嘛,请求成功后立即执行。

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

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 #Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 #Javascript
实例详解display:none与visible:hidden的区别
Mar 30 #Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 #Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 #Javascript
基于jquery实现二级联动效果
Mar 30 #jQuery
javascript中的面向对象
Mar 30 #Javascript
You might like
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python 使用office365邮箱的示例
2020/10/29 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
大学军训感言400字
2014/03/11 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书