Express.js 如何优雅地处理 JSONP 请求
在前端开发中，跨域请求是常见的需求。而JSONP（JSON with Padding）是实现跨域请求的一种常见方式。在使用 Express.js 建立 web 应用时，通过响应 JSONP 请求返回数据，是前端开发中经常使用的技巧，称之为 JSONP API，即提供 JSONP 接口。
JSONP 本质上是利用 <script> 标签可以跨域加载资源的特性，将 JSON 数据作为一段回调函数的参数，通过动态创建 <script> 标签，向指定的服务端 URL 发送 GET 请求，返回一个回调函数的调用，从而实现跨域数据的传输。这种方式虽然实现了跨域请求，但也有明显的缺点，如只能发送 GET 请求、对数据大小有限制等等。
因此，在 Express.js 上如何优雅地处理 JSONP 请求呢？下面就为大家介绍一下。
创建 JSONP API
在 Express.js 中，创建 JSONP API 非常容易，只需要通过 res.jsonp() 方法，将数据返回给客户端即可。
示例代码如下所示：
app.get('/api/jsonp', (req, res) => {
const data = { name: '张三', age: 20 };
res.jsonp(data);
});在这段代码中，我们使用 app.get() 方法监听了客户端的 GET 请求，当 URL 匹配为 '/api/jsonp' 时，就会触发回调函数：(req, res) => { }。
通过 res.jsonp() 方法将数据返回到客户端。在返回 json 数据的同时，通过回调函数名将数据传递给客户端。例如，如果客户端发起的请求 URL 是：http://localhost:3000/api/jsonp?callback=foo，那么服务端返回的数据格式将会是： foo({"name":"张三","age":20})。
实现 JSONP API 中间件
为了使 JSONP API 更加易用和灵活，我们可以将返回 JSONP 结果封装成一个中间件，以便其它路由可以方便地使用该中间件返回 JSONP 格式的数据。
示例代码如下所示：
const jsonpMiddleware = (req, res, next) => {
res.jsonp = (data) => {
const callbackName = req.query.callback;
if (callbackName) {
const result = `${callbackName}(${JSON.stringify(data)})`;
res.type('text/javascript');
res.send(result);
} else {
res.json(data);
}
};
next();
};
app.use(jsonpMiddleware);
app.get('/api/jsonp', (req, res) => {
const data = { name: '张三', age: 20 };
res.jsonp(data);
});在这段代码中，我们定义了一个 jsonpMiddleware 中间件，该中间件会在每个请求到达之前进行拦截。在该中间件中，我们定义了一个 res.jsonp 方法，这个方法中判断了请求 URL 上是否有回调函数名称。如果有，则返回 JSONP 格式的数据。
最后，我们使用 app.use() 方法将中间件注册到应用中。
总结
通过这篇文章的学习，我们了解了 JSONP 的原理，并且明白了如何使用 Express.js 创建 JSONP API 。在实际项目中，创建 JSONP API 是非常常见的需求，而实现 JSONP API 中间件，则是让代码更加优雅和易懂的好习惯。
希望本篇文章对您有所帮助，让您的前端开发工作更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e4cc0add4f0e0ff74e31d