Node.js返回JSONP

Jaxu發表於2016-05-17
Node.jsJSON

　　在使用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

相關文章