首頁 > 開發者 > JavaScript
Node.js返回JSONP詳解，node.jsjsonp詳解
在使用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對象。
以上這篇Node.js返回JSONP詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
