在使用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>
當然,如果使用express,則可以直接使用下面的代碼:
router.get('/getinfo',function (req,res,next) {
var _data = { email: 'example@163.com', name: 'jaxu' };
res.type('application/json');
res.jsonp(_data);
});
