在 express.js 中为 node.js 使用 jsonp

Posted 2023-03-03

【中文标题】在 express.js 中为 node.js 使用 jsonp

【英文标题】：using jsonp in express.js for node.js

【发布时间】：2012-12-05 09:20:02

【问题描述】：

我正在创建一个简单的 JSON API，它使用 jsonp 和 node-js 返回一个对象 这是服务器端的代码：

app.get('/vit',function  (req,res,next) 
    res.type('application/json');
    res.jsonp(items);  //items is the object
);

在部署到 nodejitsu 并转到 url /vit 我得到对象项目。这意味着它在服务器端工作。

我有另一个域，我想使用 jsonp 从其中获取此对象 这是客户端代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $.getJSON('http://trial.jit.su/vit',function  (data) 
       console.log(data) ;
    );
</script>

但我在控制台上收到以下错误：

XMLHttpRequest cannot load http://trial.jit.su/vit. Origin http://jquer.in is not allowed by Access-Control-Allow-Origin.

好像我还不懂Jsonp。

【参考方案1】：

引用 jQuery 文档

如果 URL 包含字符串“callback=?” （或类似的，由服务器端 API 定义），请求被视为 JSONP。有关详细信息，请参阅 $.ajax() 中对 jsonp 数据类型的讨论。

http://api.jquery.com/jQuery.getJSON/

您需要一个带有问号作为占位符的查询字符串参数。

查看http://trial.jit.su/vit 的响应，您错过了回调函数。您只是返回没有 P 的纯 JSON，例如如果网址包含?callback=bacon，您的回复需要是

bacon("your": "json string");

但 express 会为您执行此操作，只要您提供 callback 参数。

所以只需更改以下内容：

$.getJSON('http://trial.jit.su/vit?callback=?',function  (data) 
    console.log(data) ;
);

【讨论】：

我做了一个 hack，它的工作原理。这是服务器端的代码 .. - app.get('/callback=?*',function (req,res,next) res.type('application/json'); res.jsonp(items); //items is the object ); ... 客户端 $.getJSON('http://trial.jit.su/callback=?',function (data) console.log(data) ; );

你的服务器端很好。如果可用，Express 将获取 callback 参数。