wincheshe
wincheshe

AJAX网络请求 —— Fetch：发送跨域请求（三）

文章目录

  • Fetch：跨源请求
    • 为什么需要 CORS？跨源请求简史)
      • 使用表单
      • 使用 script
    • 简单的请求
    • 用于简单请求的 CORS
    • Response header
    • “非简单”请求
      • Step 1 预检请求（preflight request）
      • Step 2 预检响应（preflight response）
      • Step 3 实际请求（actual request）
      • Step 4 实际响应（actual response）
    • 凭据（Credentials）
    • 总结

Fetch：跨源请求

如果我们向另一个网站发送 fetch 请求，则该请求可能会失败。

例如，让我们尝试向 http://example.com 发送 fetch 请求：

try {
  await fetch('http://example.com');
} catch(err) {
  alert(err); // fetch 失败
}

正如所料，获取失败。

这里的核心概念是 源（origin）—— 域（domain）/端口（port）/协议（protocol）的组合。

跨源请求 —— 那些发送到其他域（即使是子域）、协议或端口的请求 —— 需要来自远程端的特殊 header。

这个策略被称为 “CORS”：跨源资源共享（Cross-Origin Resource Sharing）。

为什么需要 CORS？跨源请求简史)

CORS 的存在是为了保护互联网免受黑客攻击。

说真的，在这说点儿题外话，讲讲它的历史。

多年来，来自一个网站的脚本无法访问另一个网站的内容。

这个简单有力的规则是互联网安全的基础。例如，来自 hacker.com 的脚本无法访问 gmail.com 上的用户邮箱。基于这样的规则，人们感到很安全。

在那时候，JavaScript 并没有任何特殊的执行网络请求的方法。它只是一种用来装饰网页的玩具语言而已。

但是 Web 开发人员需要更多功能。人们发明了各种各样的技巧去突破该限制，并向其他网站发出请求。

使用表单

其中一种和其他服务器通信的方法是在那里提交一个

。人们将它提交到