能否在file://协议下使用Fetch API？无需Web服务器的解决方案

问题描述 #

我开发了一个仅用于本地运行的原生JavaScript单页网站，通过Fetch API获取并解析JSON数据。希望无需安装本地Web服务器，直接在浏览器打开index.html即可使用，但目前因采用file://协议导致origin为null，遭遇CORS拦截问题。请问能否配置fetch调用以忽略CORS？

示例fetch调用代码 #

fetch('js/data.json')
.then(res => res.json())
.then(function (res) {
  console.log(res);
})
.catch(function(err) {
  console.log(err);
});

报错信息 #

Access to fetch at 'file:///C:/Users/public/Desktop/site/js/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.

解决方案 #

首先明确：没法通过配置fetch本身绕过这个CORS限制——这是浏览器的安全机制，file://协议不在允许发起跨域请求的协议列表里，而且fetch没有提供能直接忽略CORS并正常解析JSON的参数（mode: 'no-cors'只能拿到无法读取内容的opaque响应，完全没用）。

给你几个不用装复杂服务器的可行方案：

• 直接把JSON嵌入JS文件
  把data.json里的内容改成JS变量，新建一个data.js文件：

  const siteData = {
    // 这里放原data.json里的所有JSON内容
  };
  

  然后在index.html里引入这个JS文件，之后直接用siteData变量就行，完全绕开fetch和跨域问题。

• 修改浏览器启动参数关闭file://的CORS限制

  • Chrome/Edge：右键浏览器快捷方式，在「目标」栏的末尾加上 --allow-file-access-from-files（注意前面有空格），重启浏览器后打开本地的index.html即可。
  • Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，把值改成false，重启浏览器后生效。

• 用轻量本地静态服务器（可选，极简操作）
  如果能接受两步操作，用Node.js的http-server：先全局安装npm install -g http-server，然后在项目文件夹里运行http-server，访问http://localhost:8080就能正常使用，彻底避开file://的问题。

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