无服务器运行时，原生JS引入共享HTML模板遇CORS错误如何解决？

在file://协议下，浏览器的CORS安全策略会阻止fetch直接读取本地文件，这就是你遇到报错的原因。以下是几个无需依赖服务器的原生JS解决方案：

方案1：将共享HTML封装为全局变量的JS文件 #

这是兼容性最好、最简便的方案，完全避开CORS限制：

1. 创建共享文件（比如shared/header.js）：

// 把header的HTML内容作为字符串存储在全局变量中
window.sharedHeader = `
<header style="background: #eee; padding: 1rem;">
  <h1>我的网站头部</h1>
  <nav>
    <a href="./index.html">首页</a> | <a href="./about.html">关于</a>
  </nav>
</header>
`;

2. 创建shared/footer.js同理：

window.sharedFooter = `
<footer style="background: #333; color: white; padding: 1rem; text-align: center;">
  <p>© 2024 我的网站</p>
</footer>
`;

3. 在需要引入的HTML页面中使用：

<!-- 先引入共享JS文件 -->
<script src="./shared/header.js"></script>
<script src="./shared/footer.js"></script>

<script>
// 将header插入到页面顶部
document.body.insertAdjacentHTML('afterbegin', window.sharedHeader);
// 将footer插入到页面底部
document.body.insertAdjacentHTML('beforeend', window.sharedFooter);
</script>

方案2：使用ES模块（需浏览器支持，部分场景需配置） #

如果偏好模块化写法，可以用ES模块导出HTML字符串：

1. 创建shared/header.js：

export const sharedHeader = `
<header>
  <!-- 你的header内容 -->
</header>
`;

2. 在主页面中引入并插入：

<script type="module">
import { sharedHeader } from './shared/header.js';
import { sharedFooter } from './shared/footer.js';

document.body.insertAdjacentHTML('afterbegin', sharedHeader);
document.body.insertAdjacentHTML('beforeend', sharedFooter);
</script>

注意：部分浏览器在file://协议下加载ES模块可能需要额外配置，比如Chrome需要启动时添加参数--allow-file-access-from-files，因此方案1更稳妥。

方案3：用iframe快速实现（纯HTML，无需JS） #

如果不需要复杂的样式融合，可以直接用iframe嵌入共享HTML：

<!-- 引入header -->
<iframe src="./shared/header.html" frameborder="0" width="100%" style="border: none; height: auto;"></iframe>

<!-- 页面主体内容 -->
<main>
  <p>页面内容...</p>
</main>

<!-- 引入footer -->
<iframe src="./shared/footer.html" frameborder="0" width="100%" style="border: none; height: auto;"></iframe>

缺点：iframe的内容是独立文档，样式和主页面隔离，需要单独为共享HTML编写样式，或者通过JS同步样式，适合简单场景。

方案4：临时修改浏览器参数（不推荐） #

如果只是临时测试，可以修改浏览器启动参数绕过CORS限制，比如Chrome：

• 关闭所有Chrome窗口
• 右键点击Chrome快捷方式，选择「属性」
• 在「目标」栏末尾添加 --allow-file-access-from-files（注意前面有空格）
• 重启Chrome后，原来的fetch代码就能正常读取本地文件了
  这个方法是全局设置，存在安全风险，不推荐日常使用。

内容的提问来源于stack exchange，提问作者24sharon