菜鸟教程
教程 jquery tutorial

跨域与 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 支持通过设置 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 示例

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnJSONP").click(function () {
      $.ajax({
        url: "/data.json",
        dataType: "jsonp",
        success: function (data) {
          $("#output").text("项目名：" + data.item);
        },
        error: function () {
          $("#output").text("跨域请求失败");
        },
      });
    });
  });
</script>

<button id="btnJSONP">发送 JSONP 请求</button>
<div id="output" style="margin-top: 10px"></div>

相关内容