# 跨域与 JSONP

URL: https://caijiao.org/jquery/06-ajax/05-jsonp
Source: docs/jquery/06-ajax/05-jsonp.md
Description: 本文介绍如何使用 jQuery 实现跨域请求，包括跨域限制的原理、JSONP 的工作机制与使用方法，帮助开发者解决不同域名间的数据访问问题。

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

## 解决跨域的常见方式

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

---

## 什么是 JSONP？

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

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

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

## jQuery 中的 JSONP 使用方式

[jQuery](/jquery/) 支持通过设置 `dataType: "jsonp"` 发起 JSONP 请求。

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

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

## JSONP 示例

[在线代码演示](/jquery/demos/22.html)