JSONP解决前端跨域学习案例

news2024/9/22 17:34:24

JSONP 的工作原理

JSONP利用的是

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP Example</title>
</head>
<body>
    <h1>JSONP Example</h1>
    <button id="sendRequest">Send JSONP Request</button>
    <p id="response"></p>

    <script>
//梳理一下逻辑。jsonp方案只能支持get请求，我们需要请求的是http://localhost:4000/data数据，请求到数据以后我们会对数据做一些操作，这个操作函数为handleResponse(data),
//script.src=‘http://localhost:4000/data?callback=handleResponse’,把函数名称作为参数拼接一起作为请求参数传递到了服务器，服务器是可以解析到handleResponse函数名的
        function handleResponse(data) {
            document.getElementById('response').innerText = JSON.stringify(data);
        }
        
        document.getElementById('sendRequest').addEventListener('click', () => {
            const script = document.createElement('script');
            script.src = 'http://localhost:4000/data?callback=handleResponse';
            document.body.appendChild(script);
        });
    </script>
</body>
</html>

后端代码：

const express = require('express');
const app = express();
const port = 4000;

app.get('/data', (req, res) => {
//服务器尝试获取携带的参数键值对，即函数名称
    const callback = req.query.callback;
    //data是服务器端的数据，就是我们通过script.src请求的数据
    const data = { message: 'This is data from the server via JSONP' };

//如果确实携带了参数，我们把函数名 和 数据 拼成函数调用的形式，
//比如这里是 handleResponse(data)
//就是handleResponse({ message: 'This is data from the server via JSONP' })形式，发送到浏览器
    if (callback) {
        // 返回JSONP格式的数据
        res.send(`${callback}(${JSON.stringify(data)})`);
    } else {
        res.json(data);
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

点击按钮以后可以获取到数据
在这里插入图片描述
查看网络请求

在这里插入图片描述

浏览器收到handleResponse({ message: 'This is data from the server via JSONP' })代码之后，将其视为普通的JavaScript代码，并立即执行。由于浏览器端的脚本中已经事先定义好了handleResponse()函数，所以并不会报错，而是直接执行。