下面小編就為大家?guī)硪黄狽ode.js返回JSONP詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。
在使用JQuery的Ajax從服務(wù)器請求數(shù)據(jù)或者向服務(wù)器發(fā)送數(shù)據(jù)時常常會遇到跨域無法請求的錯誤，常用的解決辦法就是在Ajax中使用JSONP?；诎踩钥紤]，瀏覽器會存在同源策略，然而<script/>標(biāo)簽卻具有跨域訪問數(shù)據(jù)的能力，這就是JSONP工作的基本原理。有關(guān)同源策略以及什么是JSONP。
在Node.js中實現(xiàn)JSONP非常簡單，通過下面的代碼我們從服務(wù)器返回并運行一個JavaScript函數(shù)，這個JavaScript函數(shù)已經(jīng)在調(diào)用方提前被定義好了，于是當(dāng)它被返回的時候就自動執(zhí)行了。
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;
代碼中必須規(guī)定從服務(wù)器返回數(shù)據(jù)的類型，代碼res.type('text/javascript')被加在返回的數(shù)據(jù)之前用于告訴瀏覽器這是一段JavaScript代碼。
前端頁面通過JQuery調(diào)用：
<!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面板總我們可以看到從遠(yuǎn)程服務(wù)器返回的json對象。
以上這篇Node.js返回JSONP詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考