☀️丽水晴13~21℃北京 16/9℃上海 21/18℃广州 31/22℃深圳 32/22℃杭州 19/16℃成都 20/16℃全国天气 »登录

为什么本地 HTML、JS、JSON 文件会出现跨域问题?

李李洋博客 2025-07-18 10:18 15 阅读 742 字

跨域问题的本质是浏览器的 同源策略(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修改服务器远程桌面端口图文教程

当前文章地址:http://darenshuju.cn/item/3318/27527.html

↑