Node.js返回JSONP詳解

2019-11-20 10:00:38

字體：大中小

來源：轉載

供稿：網友

在使用JQuery的Ajax從服務器請求數據或者向服務器發送數據時常常會遇到跨域無法請求的錯誤，常用的解決辦法就是在Ajax中使用JSONP。基于安全性考慮，瀏覽器會存在同源策略，然而<script/>標簽卻具有跨域訪問數據的能力，這就是JSONP工作的基本原理。有關同源策略以及什么是JSONP。

在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對象。