html5静态文件部署后出现跨域错误是因为浏览器同源策略校验协议、域名、端口是否一致；file://协议下origin为null，ajax请求指向其他地址即构成跨域。
HTML5 静态文件部署后为什么会出现跨域错误
因为浏览器的同源策略（Same-Origin Policy）在运行时强制校验 协议、域名、端口 三者是否完全一致。当你把 HTML5 页面（比如用 Vue/React 打包生成的 index.html）直接双击打开，或通过 file:// 协议加载，浏览器会将 origin 视为 null，而所有 AJAX 请求（如 fetch('/api/user')）默认指向 http://localhost:8080 或其他服务地址，这就构成跨域——哪怕后端没开 CORS，前端连请求都发不出去。
本地开发时 fetch 报错 “No 'Access-Control-Allow-Origin' header” 怎么办
这不是前端代码的问题，是后端响应头缺失。但你控制不了后端？那得换路子：
- 开发阶段用 Webpack/Vite 的
devServer.proxy或server.proxy转发请求，让前端请求看起来是同源的（例如请求/api/xxx，实际被代理到http://127.0.0.1:3000/xxx） - 如果只是调试，临时用 Chrome 启动参数绕过：
chrome --user-data-dir=/tmp/chrome --disable-web-security（仅限本地测试，勿用于日常） - 不要在
file://下测试接口调用——必须起一个本地 HTTP 服务，比如用 Python：python3 -m http.server 8000
，然后访问http://localhost:8000/index.html
上线后静态 HTML5 页面调用自己后端 API 仍跨域？检查这三点
常见于 Nginx / CDN 部署场景，问题往往不在前端代码，而在服务配置：
- 后端响应头必须包含
Access-Control-Allow-Origin，且不能是通配符*+ 带凭证（如 cookie）；若需携带认证，得写具体域名，比如https://myapp.com - Nginx 反向代理时，如果前端和 API 同域但路径不同（如页面在
/，API 在/api/），应统一代理，避免前端发请求到另一个域名；否则就得配 CORS - CDN 缓存了旧响应头？确认
Access-Control-Allow-Origin等头没被缓存覆盖，可在 Nginx 中加add_header Cache-Control "no-store"控制
JSONP 还能用吗？现代项目该不该考虑它
不能。JSONP 是利用 <script></script> 标签不受同源限制的“历史补丁”，但它只支持 GET、无错误捕获、无法设 headers、易受 XSS 影响。HTML5 标准早已用 fetch + CORS 替代它。除非维护 2010 年的老系统，否则别碰 callback=xxx 这套。真正的兼容性难点其实在 IE11 对 fetch 的缺失——这时该上 whatwg-fetch polyfill，而不是倒退用 JSONP。
立即学习“前端免费学习笔记（深入）”；
