jQuery Academy · 课时

跨域 AJAX（CORS/JSONP）

Q: 「跨域 AJAX（CORS/JSONP）」这节课中我会学到什么？

理解并应用跨域 AJAX 请求技术：使用 JSONP，或在服务器上配置 CORS 请求头，以实现安全的数据交换。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

理解并应用跨域 AJAX 请求技术：使用 JSONP，或在服务器上配置 CORS 请求头，以实现安全的数据交换。

跨域 AJAX（CORS/JSONP） 是 CoddyKit 上的免费 jQuery Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

跨域 AJAX：面临的挑战

当您的网站尝试从另一个网站获取数据时，这称为跨域 AJAX 请求。这通常比较棘手！

默认情况下，浏览器有一项安全规则，禁止网页向与其来源不同的域发出请求。这项规则可以保护您的数据。

理解同源策略

我们刚才提到的安全规则称为同源策略（SOP）。它是浏览器的一项基础安全功能。

SOP 规定，只有当两个网页具有相同的源（域、协议和端口）时，浏览器才允许第一个网页中包含的脚本访问第二个网页中的数据。

示例：来自mywebsite.com的页面无法直接从api.anotherdomain.com获取数据。

CORS：现代解决方案

为了安全地允许跨域请求，Web 社区开发了跨源资源共享（CORS）。这是处理此类请求的现代标准方式。

CORS 的工作方式是让服务器明确告知浏览器，允许某些其他域访问其资源。

CORS：服务器端配置

CORS 主要在提供数据的服务器上进行配置。服务器会在响应中发送特殊的 HTTP 标头，以指出允许哪些源。

关键标头是Access-Control-Allow-Origin。它指定哪些域可以访问该资源。

Access-Control-Allow-Origin: *（允许任何域）
Access-Control-Allow-Origin: https://yourdomain.com（仅允许指定的域）

CORS：jQuery 客户端请求

在客户端（使用 jQuery）发起 CORS 请求，通常与发起普通 AJAX 请求没有区别，前提是服务器已正确配置。

jQuery 会处理浏览器层面的通信。您只需将$.ajax()调用指向跨域网址即可。

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS：预检请求（OPTIONS）

对于某些“复杂”CORS 请求，浏览器会在发送实际请求之前执行预检请求。这是额外的安全步骤。

预检请求使用OPTIONS HTTP 方法向服务器请求许可。如果服务器授予许可，浏览器随后会发送实际请求（例如 PUT、DELETE，或带有自定义标头的请求）。

JSONP：较早的替代方案

在 CORS 被广泛采用之前，JSONP（带填充的 JSON）是处理跨域请求的常见变通方案，尤其适用于较旧的浏览器或 API。

JSONP 巧妙地利用浏览器允许从任何域加载<script>标签这一特性，绕过同源策略。

JSONP：工作机制

JSONP 的工作方式如下：

动态创建一个<script>标签，并将其src设置为跨域网址。
服务器预期收到 JSONP 请求后，会将 JSON 数据包装在一个函数调用中（这就是“填充”）。
浏览器执行这段脚本，调用页面中全局定义的函数，并将数据作为参数传入。

JSONP：jQuery 实现

jQuery 大幅简化了 JSONP 的实现。您只需在$.ajax()调用中指定dataType: "jsonp"即可。

jQuery 会自动创建动态的<script>标签、生成唯一的回调函数名称，并在响应到达时执行该函数。

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS 与 JSONP：主要区别

虽然二者都用于解决跨域问题，但 CORS 和 JSONP 具有不同的特点：

CORS：现代标准，使用 HTTP 标头，安全，支持所有 HTTP 方法，但需要在服务器端进行配置。
JSONP：较早的变通方案，使用<script>标签，安全性较低，仅支持 GET 请求，是一种客户端技术，并且需要服务器包装响应。

快速检查：跨域请求

以下关于跨域 AJAX 请求的说法哪些是 TRUE？

回顾：掌握跨域请求

您已经学会了如何克服同源策略，以发起跨域 AJAX 请求！

CORS是现代且安全的标准，依靠服务器端 HTTP 标头授予访问许可。
JSONP是用于 GET 请求的较早且安全性较低的变通方案，使用动态的<script>标签。

只要条件允许，请始终优先使用 CORS，因为它更安全、更灵活。JSONP 主要用于旧系统或特定场景。

常见问题解答

「跨域 AJAX（CORS/JSONP）」课时是免费的吗？

是的 — 「跨域 AJAX（CORS/JSONP）」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「跨域 AJAX（CORS/JSONP）」这节课中我会学到什么？

理解并应用跨域 AJAX 请求技术：使用 JSONP，或在服务器上配置 CORS 请求头，以实现安全的数据交换。你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「跨域 AJAX（CORS/JSONP）」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 jQuery Academy