浏览器控制台报错：Cross origin requests are only supported for protocol schemes

一、问题

今天写了一个H5 的小demo，然后在浏览器中运行时就报了这个错误。

Access to script at ‘file:///D://test.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

二、原因分析

在js 文件中使用了ES6 的模块化（export、import … from …），以及在index.html 文件中引入模块时，在script 标签中加入属性 type=“module”。

<script src="./main.js" type="module">script>

这样做本来应该没什么问题的，问题是浏览器在访问本地js 文件的时候遇到了跨域的问题。

我们在本地打开HTML文件时使用的是file 协议：

但是上面的报错信息提示是：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

可以看到并没有支持file 协议。

三、解决方法

有两种解决方法：

• 给浏览器传入启动参数（allow-file-access-from-files），允许跨域访问

  Windows下，打开命令行工具，输入下面命令：

  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files  
  

• 使用anywhere（静态文件服务器），可以使用npm 安装

  npm install anywhere -g 
  

  安装好后，切换到index.html 所在的文件夹，运行 anywhere

  anywhere
  也可以自定义端口号
  anywhere -p 8080
  

  运行后会自动跳转到系统默认浏览器上，终端也会显示一个运行的网址