file://协议下所有非同路径请求均被浏览器拦截，无法发出；应使用本地服务器如Live Server或代理配置解决跨域问题。
直接用 file:// 打开 HTML 就会触发跨域
浏览器对 file:// 协议有严格限制：任何 fetch、XMLHttpRequest 或 axios 发出的请求，只要目标不是 file:// 同协议同路径，一律视为跨域。哪怕你请求的是本地 http://localhost:8080/api/users，也会报 Access to fetch at 'http://localhost:8080/api/users' from origin 'null' has been blocked by CORS policy。
这不是后端没开 CORS，而是浏览器压根不给你发请求的机会——连 OPTIONS 预检都发不出去。
- 别用双击打开 HTML 文件的方式测试 API，这是最常见也最容易被忽略的根源
- 临时解决：用 VS Code 插件 Live Server 启动，或命令行运行
npx serve -s、python3 -m http.server 8000 - 如果必须离线演示，把 JSON 数据写成 JS 变量（如
const mockData = { users: [...] };），绕过网络请求
fetch('/api/users') 报错 No 'Access-Control-Allow-Origin'
这个错误说明请求已发出且后端返回了响应，但响应头里缺 Access-Control-Allow-Origin。注意：它和上一条 origin 'null' 错误性质完全不同，前者是“发不出去”，后者是“收不回来”。
开发期最稳的解法不是让后端加 CORS，而是前端配代理——把浏览器看到的请求路径伪装成同源。
立即学习“前端免费学习笔记（深入）”；
- Vite 项目改
vite.config.ts的server.proxy，例如：server: { proxy: { '/api': { target: 'http://localhost:8081', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } - 确保前端代码始终用相对路径，比如
fetch('/api/users')，而不是fetch('http://localhost:8081/api/users') - 若后端临时开启 CORS（如 Spring Boot 加
@CrossOrigin），务必只在devprofile 下启用，生产环境禁用
response.json() 报 Unexpected token < in JSON
这说明后端返回的不是 JSON，而是 HTML（比如 404 页面）、纯文本或空响应体。常见于路径写错、路由未匹配、或后端异常时返回了错误页面而非标准 JSON。
- 先在浏览器地址栏直接访问该 API 地址（如
http://localhost:8081/api/users），看返回内容是不是 JSON 格式 - 检查响应头
Content-Type是否为application/json；Spring Boot 中若 Controller 方法没加@ResponseBody或没用@RestController，就可能返回视图 - 后端抛异常时，不要裸 throw，要统一包装成
{ code: 500, message: "xxx" }并设状态码，否则前端 fetch 收到 500 但 body 是空或堆栈日志
线上部署后 API 突然 404 或 502
本地跑通、上线就崩，大概率是 Nginx 或 CDN 没配好反向代理，或者路径重写规则漏掉了前缀。
- 确认前端构建产物中所有 API 调用仍是相对路径（如
/api/users），而非硬编码的http://dev-api.example.com - Nginx 配置需显式将
/api/转发到后端服务，例如：location /api/ { proxy_pass http://backend-server/; proxy_set_header Host $host; } - 注意末尾斜杠：如果
proxy_pass以/结尾，Nginx 会自动剥离/api前缀；不带结尾斜杠则不会重写路径，容易导致 404
