借助node实战JSONP跨域实例

更新时间：2017年03月30日 11:04:47 作者：猴子猿

本篇文章主要介绍了借助node实战JSONP跨域实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、前言：

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

1、协议相同；

2、域名相同；

3、端口相同。

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

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

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

如下图所示：

了解了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服务器，如下：

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

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

但，我们一进来，就得跨域请求，是否有点不妥，所以可以动态创建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请求的嘛，请求成功后立即执行。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解NodeJs支付宝移动支付签名及验签
本文主要介绍了NodeJs支付宝移动支付签名及验签的方法，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
nodejs开发环境配置与使用
经过几个星期的nodejs学习，从开始的小白到现在渐渐得熟悉，走过来也才算明白，现在已经入门也掌握了相关的学习方法，今天开始记录下自己学习的过程，以便日后查看。
2014-11-11
如何制作一个Node命令行图像识别工具
这篇文章主要介绍了如何制作一个Node命令行图像识别工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
详解autojs的nodejs编写UI技巧示例
这篇文章主要为大家介绍了autojs的nodejs编写UI技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
Node卸载超详细步骤(附图文讲解!)
由于之前的node为8.0版本,不太满足需求,所以需要安装高版本的node,下面这篇文章主要给大家介绍了关于Node卸载超详细步骤的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-02-02
node网页分段渲染详解
按照常理，我们渲染一张网页，必定是网页全部拼装完毕，然后生成HTML字符串，传送至客户端。这也意味着，如果一张网页处理的有快有慢的话，必须串行等到所有的逻辑都处理完毕。后端才能进行返回。
2016-09-09
nodejs npm包管理的配置方法及常用命令介绍
这篇文章主要介绍了nodejs npm包管理的配置方法及常用命令介绍,需要的朋友可以参考下
2014-06-06
Node.js通过身份证号验证年龄、出生日期与性别方法示例
最近工作中需要对身份证号的年龄、出生日期与性别进行验证，所以这篇文章主要介绍了Node.js通过身份证号验证年龄、出生日期与性别的方法，在介绍完node.js的实现方法后又给大家分类的利用JS实现的方法，需要的朋友可以参考下。
2017-03-03
Nodejs中crypto模块的安全知识讲解
本篇文章给大家详细介绍了Nodejs中crypto模块的安全知识的相关内容，需要的朋友跟着小编一下学习参考下吧。
2018-01-01
利用Node转换Excel成JSON的详细步骤
最近工作中遇到一个需求,大致需求就是将Excel文件在导入时解析为json格式转换数据结构再传输给后台,下面这篇文章主要给大家介绍了关于如何利用Node转换Excel成JSON的详细步骤,需要的朋友可以参考下
2022-11-11

借助node实战JSONP跨域实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具