跨域与 JSONP

在 Web 开发中，浏览器出于安全考虑，默认阻止不同源（域名、端口、协议）之间的 AJAX 请求，这被称为同源策略限制。

解决跨域的常见方式

• 使用 服务器中转（推荐）
• 后端设置 CORS（Access-Control-Allow-Origin）
• 前端使用 JSONP（仅限 GET 请求）

---

什么是 JSONP？

JSONP（JSON with Padding）是一种绕过浏览器同源策略的跨域数据请求方式，它利用 <script> 标签不受跨域限制的特点，向服务端请求数据。

服务器响应的是一个可执行的函数调用：

callback({ name: "jQuery", type: "library" });

jQuery 中的 JSONP 使用方式

jQuery 支持通过设置 dataType: "jsonp" 发起 JSONP 请求。

$.ajax({
  url: "https://api.example.com/jsonp",
  dataType: "jsonp",
  success: function (res) {
    console.log("返回数据：", res);
  },
  error: function () {
    console.log("跨域请求失败！");
  },
});

服务端需支持并返回如：callback({...}) 这样的格式。

JSONP 示例

loading