同源策略 & Fetch 请求

使用收藏集保持井井有条 根据您的偏好保存和分类内容。

在此实验中，了解同源策略在获取资源时的工作原理。

设置：从同源获取页面

此演示托管在 https://same-origin-policy-fetch.glitch.me。这个简单的网页使用 fetch 从 https://same-origin-policy-fetch.glitch.me/fetch.html 加载资源。由于 index.html 和 fetch.html 共享相同的来源，您应该在实时预览中看到 200。

1. 从不同来源获取页面

尝试将 fetch URL 更改为 https://www.google.com。您在实时预览中看到了什么？

浏览器应该阻止了 fetch 请求，因为您请求了来自不同来源的资源。这意味着即使攻击者控制了用户的浏览器，也无法读取跨域资源。

2. 获取跨域资源

尝试将 fetch URL 更改为 https://api.thecatapi.com/v1/images/search。您在实时预览中看到了什么？

fetch URL 是不同的来源，但您应该看到状态代码 200。为什么？现代 Web 应用程序经常请求跨域资源来加载第三方脚本或查询 API 端点。为了适应这些用例，有一种称为 CORS（跨域资源共享）的机制来告诉浏览器允许加载跨域资源。有关 CORS 的更多信息，请参阅安全地共享跨域资源。