Origin、CORS 与预检

本节用两个端口的最小请求观察同源策略、预检与响应可读性的区别。

fetch('http://localhost:4000/data', { method: 'POST', headers: { 'X-Trace': 'demo' }, body: '{}' })
  .then(response => console.log(response.status))
  .catch(error => console.log('cors blocked', error.name))

页面从 localhost:3000 打开时，先在 Network 面板找 OPTIONS；服务端未返回允许的 origin、方法或请求头时，页面只能看到 CORS 网络错误。

机制拆解

Origin 由 scheme、host、port 组成；跨 origin 请求可能发送出去，但 CORS 响应头决定页面能否读取结果。带自定义头或非简单方法时先发生预检，预检失败不能用页面拿不到正文来推断服务端没有收到请求。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

用 localhost:3000 页面请求 localhost:4000 API，分别发送简单 GET 和带 X-Trace 的 POST；记录是否出现 OPTIONS、响应头和页面可读结果。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 对跨源 GET 与带自定义头 POST 记录 OPTIONS、响应头和可读结果。
2. 删除允许的请求头或 origin，解释页面为何只能看到网络错误。
3. 说明 credentials 与通配符 origin 不能随意组合。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。