使用CDN引入Vue的项目导入本地JSON文件被CORS拦截如何解决

错误原因 #

你遇到的CORS报错是浏览器对file://协议的安全限制导致：

从'null'源访问地址为'file:///C:/files/development/vue/reading_schedule/json/books.json'的脚本被CORS策略阻止：跨域请求仅支持http、data、chrome、chrome-extension、chrome-untrusted、https协议方案。

直接双击打开HTML文件时，浏览器用file://协议加载资源，ES模块的import语法不允许在该协议下加载本地文件。而VueCLI启动了本地HTTP开发服务，所有资源走http://协议，天然符合跨域规则，所以不会报错。

解决方案 #

方案1：启动本地静态服务（最推荐，无需修改业务代码） #

在项目根目录启动任意HTTP静态服务，通过http://localhost访问页面即可，常用的启动方式：

• Node.js环境：先全局安装http-server

  npm install -g http-server
  

  进入项目根目录执行http-server，访问输出的本地地址（默认http://127.0.0.1:8080）即可。
• Python3环境：直接在项目根目录执行

  python -m http.server
  

  访问http://127.0.0.1:8000即可。
• PHP环境：在项目根目录执行

  php -S localhost:8000
  

方案2：调整JSON引入方式（无需启动服务，适合简单场景） #

放弃ES模块导入语法，把JSON改为JS配置文件直接挂载全局变量：

1. 将./json/books.json重命名为books.js，内容修改为：

window.books = {
  // 此处复制你原来books.json的全部内容
}

2. 修改HTML代码，在Vue脚本之前引入该JS文件，去掉原来的import语句：

<script src="./json/books.js"></script>
<script>
  // 去掉type="module"属性和import语句
  new Vue ({
    el: "#app",
    data() {
      return {
        title: 'Reading Schedule'
      }
    },
    created() {
      document.title = this.title;
      // 直接使用全局变量books即可
      console.log(books);
    }
  });
</script>

修改后直接双击打开HTML也可以正常运行。

方案3：临时关闭浏览器CORS限制（仅用于调试，不推荐） #

可以通过启动参数关闭Chrome的安全策略，仅适合临时调试用，不要用该模式访问其他公网网站，Windows启动命令示例：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\ChromeDevData"

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