由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json，合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
理解同源、CORS、预检与相关响应头。先修按 完整目录 的章节关系；基础操作、原理关系随本课讲解。
CORS 是浏览器对跨源响应访问的限制；跨源不等于跨站，预检也不是业务请求。
协议、主机、端口决定 origin；两个本机端口也跨源
自定义请求头会触发 OPTIONS，预检失败时业务 POST 不会发送
实际响应也需要允许来源；不要用 no-cors 伪装修复，opaque 响应无法读取业务内容
改变源、方法和请求头。模型不改变真实浏览器设置，不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件，比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状：请求独立来源的实验同伴时，fetch 出现 TypeError。
正常结果：OPTIONS 满足需要，POST 实际响应允许来源，浏览器可读取 JSON。
真实机制：实际 4174→4175 跨源。配置一预检拒绝，配置二实际响应缺少 CORS 头。
- 从本课准备并打开独立商城；先打开 DevTools，再运行故障。
- Network 同时看 OPTIONS 和 remote 请求，不只看 Console 的一句报错。
- 比较 Access-Control-Request-Headers 与 Allow-Headers，以及实际响应 Allow-Origin。
- 实验同伴使用独立来源（本地版为端口 4175，在线版为独立 HTTPS 站点）；对照后恢复可读取 JSON，分别记录预检与实际请求。
- 先保存证据，再应用针对性的对照；错误对照不会通过页面检查。
- 回到教程选择真实证据，完成独立挑战后写下排查与恢复步骤。
区分未发送、预检失败和响应不可读取。新会话改变输入与故障配置，可能再次抽到同一类型；按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | OPTIONS 没有允许需要的自定义请求头 | 预检拒绝且没有随后的业务 POST | 允许具体来源、方法和需要的请求头 |
| 配置2 | POST 已返回但实际响应缺少允许来源 | 预检通过、POST 存在，响应却不可读取 | 在实际响应返回匹配来源的 CORS 头 |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理，记录第一次偏离的环节。
- Network 同时看 OPTIONS 和 remote 请求，不只看 Console 的一句报错。
- 比较两个候选解释：OPTIONS 没有允许需要的自定义请求头；POST 已返回但实际响应缺少允许来源。保持其他输入一致再验证。
端口跨源不等同跨站。no-cors 产生 opaque 响应，不当作业务修复。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置；将 HTTP 缓存、Cache Storage、内存状态分开。