JSONP解决前端跨域学习案例

2025/9/23 21:21:38 来源：https://blog.csdn.net/weixin_42576837/article/details/141199364 浏览: 次关键词：JSONP解决前端跨域学习案例

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()函数，所以并不会报错，而是直接执行。