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

发布于:2024-11-29 ⋅ 阅读:(29) ⋅ 点赞:(0)

前言

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接口地址,并设置回调函数名为jsonpCallback
    let 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>

执行启动index.html文件,就会向服务器发送请求,我们查看服务器是否通过回调(这里是jsonpCallback函数)返回数据,并打印。

从上图可以看到返回的数据成功打印,可以看到通过回调传过来的数据。

以上就是http模块实现JSONP跨域传值的实现过程。