为什么本地 HTML、JS、JSON 文件会出现跨域问题?
跨域问题的本质是浏览器的 同源策略(Same-Origin Policy) 限制。即使文件都在本地,以下情况也会触发跨域:
1. 文件协议不同(核心原因)
当直接用浏览器打开本地 HTML(file:///C:/project/index.html)时,源(Origin)会被视为 null。
如果此 HTML 中的 JS 尝试通过 fetch 或 XMLHttpRequest 加载同目录的 JSON 文件(file:///C:/project/data.json),浏览器会判定为跨域请求(源 null → file:// 协议),导致失败。
即使协议相同,如果 HTML 文件和 JSON 文件的目录路径不同(例如:file:///C:/project1/index.html 和 file:///C:/project2/data.json),也会触发跨域。
浏览器禁止从 file://协议发起网络请求(包括本地 JSON),因为本地文件可能包含敏感信息,同源策略会阻止 JS 随意读取它们。
通过工具启动一个本地 HTTP 服务器,使所有文件通过 http://localhost 协议访问:
Python 内置服务器:
通过浏览器启动参数禁用安全策略:
通过本地服务器加载 JSON:
浏览器同源策略不会因为文件在本地就放宽限制。本地开发务必使用 HTTP 服务器(如 http-server 或 Live Server),这是最安全、规范的解决方案。直接双击打开 HTML 文件必然触发跨域问题。
搭建自己的技术博客有什么意义?
windows修改服务器远程桌面端口图文教程