跨域解决方案之JSONP

news2025/5/25 13:13:35

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