为什么本地 HTML、JS、JSON 文件会出现跨域问题？
温馨提示：这篇文章已超过200天没有更新，请注意相关的内容是否还可用！
跨域问题的本质是浏览器的 同源策略（Same-Origin Policy） 限制。即使文件都在本地，以下情况也会触发跨域：
1. 文件协议不同（核心原因）
当直接用浏览器打开本地 HTML（file:///C:/project/index.html）时，源（Origin）会被视为 null。
如果此 HTML 中的 JS 尝试通过 fetch 或 XMLHttpRequest 加载同目录的 JSON 文件（file:///C:/project/data.json），浏览器会判定为跨域请求（源 null → file:// 协议），导致失败。
2. 路径不一致
即使协议相同，如果 HTML 文件和 JSON 文件的目录路径不同（例如：file:///C:/project1/index.html 和 file:///C:/project2/data.json），也会触发跨域。
3. 安全限制
浏览器禁止从 file://协议发起网络请求（包括本地 JSON），因为本地文件可能包含敏感信息，同源策略会阻止 JS 随意读取它们。
解决本地跨域问题的方案
✅ 最佳方案：使用本地 Web 服务器
通过工具启动一个本地 HTTP 服务器，使所有文件通过 http://localhost 协议访问：
Node.js 方式：
npx http-server -p 5500 # 安装后访问 http://localhost:5500
Python 内置服务器：
python -m http.server 5500 # 访问 http://localhost:5500
⚠️ 临时绕过（仅开发环境）
通过浏览器启动参数禁用安全策略：
# Chrome（关闭浏览器所有实例后执行） chrome.exe --disable-web-security --user-data-dir="C:/temp"
✅ 其他方案
| 方案 | 具体操作 |
|---|---|
| JSON 嵌入 JS | 将 JSON 数据直接写入 JS 文件：const data = {...}; |
| 修改响应头 | 在 JSON 文件顶部添加（需服务器支持）：Access-Control-Allow-Origin: * |
使用 Webpack/Vite | 现代前端工具内置开发服务器（自动解决跨域） |
<script> 标签加载 | 通过 type="module" 导入 JSON（需配置 import 路径） |
代码演示
通过本地服务器加载 JSON：
// 在 http://localhost:5500 下运行的 HTML 文件
fetch('data.json')
.then(response => response.json())
.then(data => console.log(data));关键结论
浏览器同源策略不会因为文件在本地就放宽限制。本地开发务必使用 HTTP 服务器（如 http-server 或 Live Server），这是最安全、规范的解决方案。直接双击打开 HTML 文件必然触发跨域问题。
文章版权声明：除非注明，否则均为李洋博客原创文章，转载或复制请以超链接形式并注明出处。
发表评论