在使用JQuery的Ajax從伺服器請求數據或者向伺服器發送數據時常常會遇到跨域無法請求的錯誤，常用的解決辦法就是在Ajax中使用JSONP。基於安全性考慮，瀏覽器會存在同源策略，然而<script/>標簽卻具有跨域訪問數據的能力，這就是JSONP工作的基本原理。有關同源策略以及什麼是JSONP，可 ...
在使用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: '[email protected]', 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對象。
