Node.js 中使用跨域 JSONP 方式请求数据
在前端开发中，我们经常会遇到跨域请求数据的问题，而 JSONP 就是一种常用的跨域请求数据的方式。本文将详细介绍在 Node.js 中使用 JSONP 实现跨域请求数据的方法。
什么是 JSONP？
JSONP（JSON with Padding）是一种解决跨域请求数据的方案，在客户端与服务器之间进行数据传输时，利用了 script 标签不受同源策略限制的特性。JSONP 请求的返回值被包裹在一个 JavaScript 函数中返回，可以通过 script 标签加载该函数来获取数据。
JSONP 的请求过程：
- 创建一个 script 标签，指定要请求的 URL，和回调函数的名称。
<script src="http://example.com/data.php?callback=handleData"></script>
- 服务器接收到请求后，将数据用 JavaScript 代码格式化。
handleData({
"name": "张三",
"age": 20,
"email": "zhangsan@example.com"
})- 客户端浏览器解析 JavaScript 代码，调用回调函数，并将数据传入该函数。
function handleData(data) {
console.log(data);
}JSONP 请求的优点在于它可以跨域请求数据，但它的缺点是必须能够控制后端服务器来将数据包装为 JavaScript 脚本格式，并且无法处理 POST 请求等其他请求方法，只能使用 GET 请求。
使用 JSONP 实现跨域请求数据
在 Node.js 中使用 JSONP 实现跨域请求数据的方法与浏览器端的一样，只需要按照上述 JSONP 请求的过程即可。
以下是一个使用 Express 框架实现的 JSONP 请求示例，服务器端代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------- ----- ---- -- -
----- ---------------- - -------------------
----- ---- - -
----- -----
---- ---
------ ----------------------
--
---------------------------------------------------------
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---以上代码中，我们使用 Express 框架实现了一个路由为 /jsonp 的 GET 请求，该请求会返回一个包含数据的 JSONP 响应。其中，我们从请求中获取了前端传递过来的 callback 函数名称，并将回调函数名称和数据一起打包成 JSONP 响应返回给前端。
客户端代码如下：
function handleData(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'http://localhost:3000/jsonp?callback=handleData'
document.head.appendChild(script);以上代码中，我们在客户端新建了一个 script 标签，并指定了要请求的 URL 和回调函数名称，将该 script 标签插入到文档头部即可。
通过以上代码，我们就可以在 Node.js 中使用 JSONP 实现跨域请求数据了。
结论
使用 JSONP 方式可以解决一些跨域请求数据的问题，但是也存在一些缺点，如只能使用 GET 方法等。为了实现更复杂的跨域请求数据操作，还需要其他跨域方式进行实现，如 CORS、反向代理等。希望本文能为您提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752f15f8bd460d3ad99e968