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

浏览器控制台报错：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

来杯卡布奇洛

11003人浏览 · 2021-05-11 21:38:36

来杯卡布奇洛 · 2021-05-11 21:38:36 发布

浏览器控制台报错：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
```
运行后会自动跳转到系统默认浏览器上，终端也会显示一个运行的网址