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

跨域解决方案之JSONP

news 来源：原创 2025/5/24 5:23:44

一、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 响应。