借助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 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 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
图解上海144收音机
2021/03/02 无线电
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
pandas去除重复列的实现方法
2019/01/29 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
毕业生教师求职信
2013/10/20 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
暂住证明怎么写
2015/06/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏