Node.js返回JSONP

最新推荐文章于 2022-03-11 22:06:53 发布

ddjq1044

最新推荐文章于 2022-03-11 22:06:53 发布

阅读量122

点赞数

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/jaxu/p/5500637.html

版权

　　在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误，常用的解决办法就是在Ajax中使用JSONP。基于安全性考虑，浏览器会存在同源策略，然而<script/>标签却具有跨域访问数据的能力，这就是JSONP工作的基本原理。有关同源策略以及什么是JSONP，可以参考园子里的这篇文章http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

　　在Node.js中实现JSONP非常简单，通过下面的代码我们从服务器返回并运行一个JavaScript函数，这个JavaScript函数已经在调用方提前被定义好了，于是当它被返回的时候就自动执行了。

var express = require('express');
var router = express.Router();

router.get('/getinfo', function(req, res, next) {
  var _callback = req.query.callback;
  var _data = { email: 'example@163.com', name: 'jaxu' };
  if (_callback){
      res.type('text/javascript');
      res.send(_callback + '(' + JSON.stringify(_data) + ')');
  }
  else{
      res.json(_data);
  }
});

module.exports = router;

　　代码中必须规定从服务器返回数据的类型，代码res.type('text/javascript')被加在返回的数据之前用于告诉浏览器这是一段JavaScript代码。

　　前端页面通过JQuery调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp test</title>
    <script src="/bower_components/jquery/dist/jquery.js"></script>
</head>
<body>
    <input type="button" value="click" id="btn">
    <script type="text/javascript">
        $(function(){
            $('#btn').on('click', function(){
                $.get('http://anothersite/api/getinfo', function(d){
                    console.log(d);
                }, 'jsonp');
            });
        });
    </script>
</body>
</html>

　　运行代码，点击按钮，在浏览器的console面板总我们可以看到从远程服务器返回的json对象。

　　当然，如果使用express，则可以直接使用下面的代码：

router.get('/getinfo',function  (req,res,next) {
    var _data = { email: 'example@163.com', name: 'jaxu' };
    res.type('application/json');
    res.jsonp(_data);
});

　　参考express的文档http://www.expressjs.com.cn/4x/api.html#res.jsonp

转载于:https://www.cnblogs.com/jaxu/p/5500637.html