4. Network 调试、跨域与接口排错

浏览器 F12 Network 面板看请求，跨域就是不同源的网站互相要数据被浏览器拦。

核心三个：
1. 看请求——Network 面板看请求头/响应头
2. 跨域——协议/域名/端口任一不同就是跨域
3. 解决方案——后端设 CORS 或 JSONP

坑：跨域是浏览器安全策略不是服务器问题、status 200 但报错大概率跨域、JSONP 只支持 GET。

判断"是不是同一家店"要看三样东西：协议（http 还是 https）、域名/IP（是谁）、端口号（几号门）。三样全一样才叫"同源"，有任何一个不一样就是"跨域"，浏览器就拦你。本地开发必须用 Live Server 打开页面，绝对不能双击 HTML 文件。

4.1 互动演示（同源判断小测验）

4.2 知识点讲解

1. 同源策略是什么？怎么判断跨域？

同源策略是浏览器自带的安全保护机制，用来防止恶意网站偷偷读你别的网站的数据。就像酒店的门禁卡：你只能进你住的那栋楼，不能刷进隔壁楼的房间。

判断"同源"（同一家店）需要三样全部相同，有任何一个不同就是"跨域"：

// 判断同源需要同时满足 3 项全部相同：
// 1. 传输协议：http / https / file（本地文件）
// 2. 域名或 IP：127.0.0.1 / localhost / www.xxx.com
// 3. 端口号：3000 / 5500 / 8080

// ===== 对比看看 =====
// 同源：
// 页面：http://127.0.0.1:5500/index.html
// 请求：http://127.0.0.1:5500/list.html
// → 协议一样(http)、IP一样(127.0.0.1)、端口一样(5500) → 同源！

// 跨域1：端口不同
// 页面：http://127.0.0.1:5500/index.html
// 请求：http://127.0.0.1:3000/api
// → 端口 5500 ≠ 3000 → 跨域！

// 跨域2：协议不同
// 页面：file:///C:/demo/index.html（双击打开的）
// 请求：http://127.0.0.1:3000/api
// → 协议 file ≠ http → 跨域！

如果你在 Network 面板的 Response 里什么都看不到，但 Console 里有红字 CORS 报错，那就是跨域——因为浏览器在网络层面就把响应拦住了，Network 里看不到内容。跨域报错去 Console 看，不去 Network 看。

2. 为什么双击打开 HTML 必然跨域？

很多同学不理解"我就双击个 HTML 怎么就跨域了"。原因很简单：双击打开的页面，地址栏协议是 file://（本地文件协议），而后端接口是 http://（网络协议）——协议不一样，浏览器立刻拦住你。

// 双击打开的页面：
// 地址栏：file:///C:/Users/xxx/demo.html
// 协议 = file（本地文件）

// 你发的请求：
// 接口地址：http://127.0.0.1:3000/api/user
// 协议 = http（网络）
// 协议不一样 → 同源策略拦截 → 请求发不出去

所以写前端页面、调试 AJAX 接口时，绝对禁止双击 HTML 打开。必须用 VS Code 的 Live Server 插件——它会帮你起一个本地小服务器，地址变成 http://127.0.0.1:5500，协议统一成 http，file 协议的跨域问题就解决了。但要注意：如果前后端端口不同（比如前端 5500、后端 3000），仍然跨域，那得后端配 CORS。

3. 跨域问题谁来解决？

很多新手一看到跨域就疯狂改自己的前端代码，其实根本没用。跨域是浏览器给前端页面加的限制，但解决方案在后端手里——就像你进不了别人的店，得让那家店的老板开门，你自己在门口撬锁没用。

// 1. 后端主流解决方案：配置 CORS（跨域资源共享）
// 后端加一个响应头，告诉浏览器"允许这个前端域名来访问"
// 这是最正规、最常用的办法

// 2. 前端能做的（只是辅助手段，不能根治）：
// a. 开发阶段用代理（webpack/vite 配置 proxy）
// b. JSONP（只支持 GET，现在基本不用了）

// 3. 出现跨域报错，第一反应：
// → 截图发给后端同学，让他配 CORS
// → 不要自己在前端瞎折腾

如果你试图在前端代码里硬绕跨域，比如改 xhr 的属性、加什么特殊请求头——大概率没用。因为跨域是浏览器层面的安全限制，前端代码绕不过去，根源和解决方案都在后端。

4. 接口排错四步法（90% 的问题都能查出来）

接口请求失败了别急着慌，按这四步一步一步查：

// 第一步：核对接口 URL 地址
// 检查拼写、路径大小写、斜杠有没有多写少写
// 常见错：/api/userlist 写成 /api/userList（大小写不一致）

// 第二步：区分 GET/POST 传参位置
// GET → 参数拼在 URL 上（?page=1&size=10）
// POST → 参数放在 send 里面
// 常见错：POST 参数忘了塞 send，拼到 URL 上去了

// 第三步：Network 面板看 status 状态码
// F12 → Network → 筛选 XHR
// 404 = 地址错了（后端没这个接口）
// 500 = 后端代码报错（告诉后端查日志）
// 403 = 没权限（token 过期了？）
// 200 = 网络通了，但还要看业务码

// 第四步：打印 responseText
// console.log(xhr.responseText)
// 看后端返回的错误提示文字是什么，照着提示修

配合 Network 面板使用：F12 → Network → 点 XHR 筛选 → 看 General（地址和状态码）/ Request Headers（请求头）/ Query String Parameters（GET 参数）/ Response（返回内容）。四步按顺序查，90% 的接口问题都能定位。

5. 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

1. 前端调后端接口时遇到跨域，找后端配 CORS
2. 本地开发用 Live Server 避免 file 协议跨域
3. 接口请求失败时用排错四步法定位问题。

常见的问题：

1. 双击打开 HTML，Console 一片红——file 协议跨域
2. 前端 5500 端口调后端 3000 端口，跨域——前端改代码没用
3. 接口返回 404——URL 拼错了
4. 接口返回 200 但数据不对——没看业务码。

解决思路：

1. 先确认页面是用 Live Server 打开的（地址栏是 http:// 开头）
2. 有 CORS 报错就找后端配，别自己改前端
3. 404 查 URL 拼写
4. 200 了还不对，打印 xhr.responseText 看后端到底返回了什么。

4.3 课后作业（融入本节）

本页重点