当前位置：首页 > news >正文

node.js基础学习-http模块-JSONP跨域传值（四）

news 2025/8/2 9:09:13

前言

JSONP（JSON with Padding）是一种用于跨域数据传输的技术。在浏览器的同源策略限制下，一般情况下，JavaScript 不能直接从不同域的服务器获取数据。JSONP 通过利用 <script> 标签的跨域特性来绕过这个限制。
它本质上是一种非官方的跨域数据交互解决方案，主要用于从不同域名的服务器获取数据，在前后端分离的开发模式以及与第三方 API 交互等场景中发挥着重要作用。

一、使用场景

跨域数据获取：在前后端分离的项目中，前端应用（如运行在 http://localhost:3000）需要从后端服务器（如 http://api.example.com）获取数据时，当后端服务器没有配置 CORS（跨域资源共享），JSONP 是一种简单的跨域解决方案。
与第三方 API 交互：当使用一些第三方的 API 服务，且这些服务支持 JSONP 时，也可以使用 JSONP 来获取数据。例如，一些天气 API、地图 API 等，在不支持 CORS 或者为了简单快速地获取数据时，可以考虑使用 JSONP。

二、JSONP工作原理

利用<script>标签：浏览器在加载 JavaScript 脚本时，不受同源策略的限制。JSONP 利用了这一点，在客户端通过动态创建 <script> 标签来请求服务器数据。例如，假设服务器端提供了一个接口 http://example.com/api?callback=myCallback，客户端会动态创建一个如下的 <script> 标签：

<script src="http://example.com/api?callback=myCallback"></script>

服务器响应：服务器收到请求后，会将数据包装在指定的回调函数（这里是 myCallback）中返回。例如，服务器返回的数据可能是这样的格式：myCallback({ "data": "value" })。当浏览器接收到这个响应并将其作为脚本执行时，实际上是在调用客户端预先定义好的 myCallback 函数，并将数据作为参数传入。

客户端处理：在客户端，需要预先定义好这个 myCallback 函数来接收和处理服务器返回的数据。例如：

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

客户端打印出来的data就是服务端传过来的数据

三、JSONP优点

简单易用：JSONP 的实现相对简单，对于只需要获取数据的跨域场景，通过简单地创建 <script> 标签和定义回调函数就可以实现。与一些复杂的跨域解决方案（如 CORS）相比，它的代码复杂度较低。
兼容性好：几乎所有的浏览器都支持通过 <script> 标签加载外部脚本，所以 JSONP 在各种浏览器环境下都能很好地工作，不需要考虑浏览器兼容性问题。

四、JSONP缺点

安全风险：由于 JSONP 是通过 <script> 标签加载数据，这就意味着服务器返回的数据会被当作 JavaScript 代码来执行。如果服务器被攻击者控制，返回恶意代码，那么客户端就会执行这些恶意代码，导致安全问题，如 XSS（跨站脚本攻击）。
只能用于 GET 请求：JSONP 是基于 <script> 标签的机制，而 <script> 标签只能发起 GET 请求。所以，如果需要进行 POST 等其他类型的请求，JSONP 就无法满足需求。

五、HTTP模块实现JSONP跨域传值

服务端：

当服务器接收到请求时，需要检查请求的 URL 参数，看是否包含一个用于 JSONP 的回调函数名称（通常通过类似callback的参数指定）。例如，在一个http模块创建的服务器中，可以在请求处理函数中检查：

//使用http模块创建服务器，我们建议使用commonjs模块规范，因为很多第三方的组件都使用了这种规范。当然es6写法也支持。
//http模块式Node.js内置的模块，用于创建和管理HTTP服务器。传统的HTTP服务器一般使用C语言编写，但Node.js使用JavaScript实现，因此性能更好。
const http = require('http')//url模块用于解析url参数
const url=require('url');//创建服务器，监听3000端口
http.createServer((req, res) => {//判断请求url是否为favicon.ico，如果是则返回空（这个请求是一个浏览器的默认请求，可以忽略）if (req.url === '/favicon.ico') {return}//设置响应头，状态码为200，内容类型为text/html;charset=utf-8，这种才能正常显示中文res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'})//解析url参数，这里的第二个参数为true，表示解析query字符串，返回object格式const parsedUrl = url.parse(req.url,true);console.log(parsedUrl);let {pathname,query}=parsedUrl;//callback参数中可以指定回调函数名，这里我们取名为callback（不一定要叫callback，可以随意取，但是要和客户端请求时一致）let {callback}=query;//如果有callback参数，则说明是jsonp请求，返回jsonp格式的数据if(callback){res.write(`${callback}(${JSON.stringify({name:'zhangsan',age:20})})`)}//这里必须要end，否则会出现卡死的情况res.end()
}).listen(3000, () => {console.log('Server is running on port 3000')
})

客户端：

我们创建一个index.html页面，在里面创建一个script标签，实现请求jsonp服务端接口的客户端。

index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>jsonp接口调用测试</h1>
<script>// 创建一个script标签，设置src属性为jsonp接口地址，并设置回调函数名为jsonpCallbacklet script = document.createElement('script')script.src = 'http://localhost:3000/jsonp?callback=jsonpCallback';//添加到body中，加载这个页面的时候就会自动执行这个script标签，发起jsonp请求document.body.appendChild(script);// 定义回调函数，接收jsonp接口返回的数据（这里的回调函数名要和jsonp接口地址中的callback参数保持一致）function jsonpCallback(data) {console.log('jsonp服务端接口返回的数据：',data)}
</script>
</body>
</html>