file://协议页面无法发起跨域请求，因浏览器将其origin设为NULL且不发送请求；必须改用http/https协议，配合服务端CORS配置、本地服务器或开发代理解决。
本地直接双击打开的 file:// 协议 html 页面，调用 fetch 或 XMLHttpRequest 请求外部 HTTP/HTTPS 接口时，浏览器会直接拒绝，这不是你代码写错了，而是浏览器强制执行的跨域限制——且这种限制在 file:// 协议下无法绕过（连 CORS 头都发不出去）。
为什么 file:// 页面一定跨域失败？
浏览器把 file:// 视为一个独立、高权限但无源（origin）的协议。它和任何 http:// 或 https:// 地址都不满足同源策略中的“协议+域名+端口”一致条件，因此所有 fetch 请求会被立即拦截，控制台报错类似：
access to fetch at 'https://api.example.com/data' from origin 'null' has been blocked by CORS policy.注意这个 origin 'null' —— 它说明请求根本没发出，服务端日志里也看不到这次调用。
-
file://页面无法设置Access-Control-Allow-Origin等响应头 - 禁用浏览器安全策略（如 chrome 加
--disable-web-security）仅限临时调试，不可用于协作或交付 - 前端加
mode: 'no-cors'只能让请求发出去，但结果无法读取（返回opaque类型响应），对绝大多数接口无意义
真正可用的三种解决方式
必须让页面运行在 http:// 或 https:// 协议下，才能触发标准的 CORS 流程（即浏览器发请求 → 服务端返回正确 header → 浏览器放行）。
立即学习“前端免费学习笔记（深入）”；
- 用轻量本地服务器启动 HTML：比如 VS Code 的
Live Server插件，或命令行执行npx serve -s .（需安装serve）、python3 -m http.server 8000 - 后端接口开启 CORS 支持：服务端响应中必须包含
Access-Control-Allow-Origin: http://localhost:8000（不能是*+credentials: true组合） - 开发阶段用代理：若你用 vite / webpack Dev Server，配置
proxy将/api代理到目标域名，使前端请求看起来是同源的
fetch 调用时容易忽略的细节
即使页面已托管在 http://localhost 下，仍可能因参数缺失被拦截：
- 如果接口需要带 cookie 或认证头，必须显式传
credentials: 'include'，否则浏览器不会发送凭证，且服务端Access-Control-Allow-Origin不能设为* - 非简单请求（如带
Content-Type: application/json或自定义 header）会先发OPTIONS预检，服务端必须正确响应预检请求（包括Access-Control-Allow-Headers、Access-Control-Allow-Methods） - Chrome 对
localhost和127.0.0.1视为不同 origin，前后端协议/域名/端口必须完全一致
最简验证方式：先确保 HTML 是通过 http://localhost:8000/index.html 打开的，再检查浏览器 Network 面板里请求是否发出、状态码是否为 200、Response Headers 是否含 Access-Control-Allow-Origin。只要这三步都成立，问题就出在 JS 调用逻辑本身，而不是跨域机制。