Express.js res.jsonp()函数

res.jsonp() 是 Express.js 中一个非常有用的函数，它允许你以 JSONP （JSON with Padding）格式返回 JSON 数据。JSONP 是一种解决跨域请求的技术，它允许页面上的 JavaScript 代码从不同的域名请求数据。

语法

res.jsonp([status], [data])

• status 可选，HTTP 状态码，通常为 200（默认值）。
• data 必填，JSON 数据。

示例

app.get('/api/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  res.jsonp(data);
});

这个简单的示例演示了如何使用 res.jsonp() 将 JSON 数据返回给客户端。

JSONP 原理

JSONP 基于动态加载 script 标签的特性实现。在客户端中，我们创建一个动态的 script 标签，然后将需要请求数据的 url 作为 script 标签的 src 属性传入，再通过回调函数处理获取到的数据。这样就可以绕过同源策略，请求其他域名下的数据了。

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '&callback=' + callback;
  document.head.appendChild(script);
}

jsonp('https://example.com/api/data?callback=callbackFunc', (data) => {
  console.log(data);
});

function callbackFunc(data) {
  console.log(data);
}

在服务端，我们需要返回 callback 请求参数指定的名称的函数调用，将 JSON 数据当做它的参数。

app.get('/api/data', (req, res) => {
  const data = { message: 'Hello, world!' };
  const callback = req.query.callback;
  res.send(`${callback}(${JSON.stringify(data)})`);
});

缺点

虽然 JSONP 非常有用，但它也存在一些缺点：

• 安全性问题：JSONP 实现时需要客户端传入一个回调函数名称，在不明确限制回调函数名称时可能存在安全风险，比如被用于 XSS 攻击。
• 只支持 GET 请求：由于使用 script 标签动态加载数据，所以只支持 GET 请求
• 可维护性问题：在实际使用中，JSONP 后端代码与前端代码耦合度较高，不利于代码维护。

综上所述，JSONP 可以用于特定场景下的跨域请求，但对于通用的跨域请求问题，CORS（Cross-Origin Resource Sharing，跨域资源共享）是更好的解决方案。