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

跨域解决方案之JSONP

article 2025/8/28 16:49:45

一、JSONP 核心原理

二、JSONP 实现步骤

（一）客户端代码

（二）服务器端代码（ASP.NET实现）

1. ASP.NET Web Forms 实现

2. ASP.NET Core 实现

三、JSONP 优缺点

（一）优点

（二）缺点

四、JSONP 适用场景

在 Web 开发领域，跨域问题始终是开发者需要攻克的难关。浏览器的同源策略严格限制了不同源（协议、域名、端口任意一项不同）之间的资源访问，导致 AJAX 请求无法直接获取跨域数据。JSONP（JSON with Padding）作为早期流行的跨域解决方案，利用<script>标签的特性巧妙绕过这一限制。虽然如今 CORS 已成为主流，但 JSONP 的原理与应用仍值得深入了解。

一、JSONP 核心原理

JSONP 的核心在于利用<script>标签不受同源策略限制的特性。在 HTML 中，<script>标签可以加载任意域名的 JavaScript 文件，浏览器会自动执行其中的代码。JSONP 将原本的 JSON 数据包裹在一个函数调用中，形成可执行的 JavaScript 代码，从而实现跨域数据传输。

具体流程如下：

客户端定义回调函数：在页面中创建一个全局函数，用于接收和处理服务器返回的数据。

动态发起请求：通过创建<script>标签，并将请求 URL 设置为src属性，其中包含指定的回调函数名参数。

服务器响应包装：服务器接收到请求后，提取回调函数名，将数据以该函数调用的形式返回。

浏览器执行代码：浏览器加载并执行<script>标签中的代码，自动调用回调函数，将数据传递给客户端。

二、JSONP 实现步骤

（一）客户端代码

以下是通过原生 JavaScript 实现的 JSONP 请求示例，包含按钮点击触发请求的逻辑：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSONP Example</title>
</head>
<body><button id="fetchDataBtn">获取数据</button><div id="result"></div><script>function handleData(data) {console.log('Received data:', data);document.getElementById('result').innerHTML = JSON.stringify(data);}const fetchDataBtn = document.getElementById('fetchDataBtn');fetchDataBtn.addEventListener('click', function () {// 移除之前的script标签const existingScripts = document.querySelectorAll('script[src^="https://api.example.com/data?callback=handleData"]');existingScripts.forEach(script => script.remove());const script = document.createElement('script');const url = 'https://api.example.com/data?callback=handleData';script.src = url;document.body.appendChild(script);});</script>
</body>
</html>

在上述代码中：

定义handleData回调函数，用于处理服务器返回的数据，并更新页面内容。

为按钮添加点击事件监听器，每次点击时先移除已存在的用于该 JSONP 请求的<script>标签，避免标签冗余，再动态创建新的<script>标签发起请求。

（二）服务器端代码（ASP.NET实现）

1. ASP.NET Web Forms 实现

在ASP.NET Web Forms 项目中，可在WebForm1.aspx.cs文件中添加如下代码：

using System;
using System.Web;public partial class WebForm1 : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){string callback = Request.QueryString["callback"];if (!string.IsNullOrEmpty(callback)){var data = new { message = "This is data from ASP.NET server", code = 200 };string jsonData = Newtonsoft.Json.JsonConvert.SerializeObject(data);string jsonpResponse = $"{callback}({jsonData})";Response.ContentType = "application/javascript";Response.Write(jsonpResponse);Response.End();}}
}

上述代码中，首先获取 URL 中的callback参数，然后将数据序列化为 JSON 字符串，再将其包装在回调函数中，最后设置响应头并返回结果。

2. ASP.NET Core 实现

在ASP.NET Core 项目中，需先安装Newtonsoft.Json包，然后在Controllers文件夹下创建JsonpController.cs文件，代码如下：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;namespace JsonpDemo.Controllers
{[Route("api/[controller]")][ApiController]public class JsonpController : ControllerBase{[HttpGet]public IActionResult GetData(){string callback = Request.Query["callback"];if (string.IsNullOrEmpty(callback)){return BadRequest("callback parameter is required");}var data = new { message = "This is data from ASP.NET Core server", code = 200 };string jsonData = JsonConvert.SerializeObject(data);string jsonpResponse = $"{callback}({jsonData})";return Content(jsonpResponse, "application/javascript");}}
}

在ASP.NET Core 的实现里，通过控制器接收请求，获取callback参数，包装数据后以指定的application/javascript类型返回 JSONP 响应。

三、JSONP 优缺点

（一）优点

兼容性好：几乎支持所有浏览器，包括老旧版本，适用于对浏览器兼容性要求高的项目。

实现简单：无需复杂的服务器配置和中间件，客户端和服务器端代码逻辑清晰，易于上手。

（二）缺点

安全性低：由于允许加载任意来源的 JavaScript 代码，容易遭受跨站脚本攻击（XSS）。若服务器返回的内容被篡改，可能导致用户数据泄露。

仅支持 GET 请求：受<script>标签请求方式限制，无法满足 POST、PUT 等其他请求类型的需求，不适用于数据提交场景。

错误处理困难：缺乏像 AJAX 那样完善的错误处理机制，请求失败时难以准确捕获和处理错误信息，不利于调试。

四、JSONP 适用场景

尽管 JSONP 存在诸多局限性，但在某些场景下仍有其价值：

老旧项目兼容：对于无法大规模重构的历史项目，为实现跨域功能且保证浏览器兼容性，JSONP 可作为过渡方案。

简单数据查询：仅需从服务器获取数据，且对安全性要求不高的场景，如公开 API 的数据查询。

JSONP 作为早期的跨域解决方案，以独特的方式在 Web 开发历史中留下了印记。虽然随着技术发展，CORS 凭借更高的安全性和更全面的功能逐渐占据主导地位，但 JSONP 的原理和应用依然是开发者理解跨域技术演进的重要一环。

跨域解决方案之JSONP

一、JSONP 核心原理

二、JSONP 实现步骤

（一）客户端代码

（二）服务器端代码（ASP.NET实现）

三、JSONP 优缺点

（一）优点

（二）缺点

四、JSONP 适用场景

相关文章：

跨域解决方案之JSONP

【AI测试革命】第七期：AI性能测试的深度实践——从智能建模到自动化调优的全链路升级

Thinkphp6使用token+Validate验证防止表单重复提交

AppAgentx 开源AI手机操控使用分享

Axure设计之带分页的穿梭框原型

嵌入式硬件篇---陀螺仪｜PID

电机控制储备知识学习（五）三项直流无刷电机(BLDC)学习（四）

Java—— 网络爬虫

Baklib内容中台的主要构成是什么？

深度解析 Java 中介者模式：重构复杂交互场景的优雅方案

家用和类似用途电器的安全第1部分：通用要求与2005版差异（7）

HTTP Digest 认证：原理剖析与服务端实现详解

untiy实现汽车漫游

PID项目---硬件设计

Pluto实验报告——基于FM的音频信号传输并解调恢复

【Redis】AOF日志

Leetcode 2792. 计算足够大的节点数

《关于浔川社团退出DevPress社区及内容撤回的声明》

Windows逆向工程提升之IMAGE_RESOURCE_DIRECTORY

使用ps为图片添加水印

x64_ubuntu22.04.5安装：cuda driver + cuda toolkit

开盘啦 APP 抓包逆向分析

vs2022 Qt Visual Studio Tools插件设置

Python包init.py标识文件解析

【MySQL】第8节｜Innodb底层原理与Mysql日志机制深入剖析（一）

电商ERP管理系统，Java+Vue，含源码与文档，统筹订单、库存等，助力电商企业高效运营

Spring Boot微服务架构（四）：微服务的划分原则

【打卡】树状数组的操作

OpenLayers 加载动画控件

Oracle 基础知识作业的使用