深入理解 JSONP：跨域的经典解决方案

深入理解 JSONP：跨域的经典解决方案

在前端开发中，跨域问题一直是一个绕不开的话题。本文将带你重新理解 JSONP 的原理、优缺点，并通过代码示例深入剖析其实现方式。同时，我们还会探讨 JSONP 的安全性问题，并对比当前最新的跨域技术，分析 JSONP 在现代开发中的适用性。

---

什么是 JSONP？

JSONP（JSON with Padding）是一种跨域数据请求的解决方案。它的核心思想是利用 <script> 标签不受同源策略限制的特性，通过动态创建 <script> 标签来实现跨域请求。

---

JSONP 的实现原理

浏览器的同源策略限制了大多数跨域请求，但 <script> 标签是一个例外。JSONP 正是利用了这一点，将跨域请求伪装成加载脚本的行为。

如何实现 JSONP？

以下是一个简单的 JSONP 实现示例：

客户端代码（jsonp.html）

function jsonpRequest(url, callbackName) {
   
   
    const script = document.createElement('script');
    script.src = `${
     
     url}?callback=${
     
     callbackName}`;
    document.body.appendChild(script);
}

function handleResponse(data) {
   
   
    console.log('Response from server:', data);
}

// 调用本地 8001 端口的 /api/greet 接口
// 确保服务端返回类似 handleResponse({ message: "Hello, JSONP!" }) 的 JSONP 响应
jsonpRequest('http://localhost:8001/api/greet', 'handleResponse');

服务端代码（server.js）

const express = require('express');

const app = express();
const port = 8001;

app.