解决Cross origin requests are only supported for protocol schemes的三种办法

今天在写了一个简单的H5页面，项目结构如下图所示

然后在运行的时候突然报错

Access to script at
‘file:///Volumes/PERSON/font_end/h5xuexi/h5-learning3/vue_nocli/js/main.js’
from origin ‘null’ has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.

我想来想去都没有相同怎么回事，后来发现是由于我在一个js文件里面倒入其他js文件的时候在标签里面加入了type=“module”

        <script type="module" src="./js/main.js"  type="text/javascript" charset="utf-8"></script>

但是这样做本身是没什么问题的啊，使用es6语法，在其中一个js文件里面导入其他文件的内容是用的import …from…

后来再经过研究终于发现了问题所在，其实问题就是浏览器在访问本地js文件的时候遇到了跨域的问题，我们这种引入方式属于file协议，但是上面的报错信息提示是：

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

其实翻译成人话就是，本地跨域仅支持ajax跨域只支持这些协议框架：http,https,data,chrome（Chrome浏览器）,chrome-extension（Chrome扩展插件），chrome-extension-resource（Chrome扩展资源），就是没有file协议!用了jsonp这种跨域json数据交互协议也没有，人家ajax就只支持那几个协议，并且jsonp交互协议也非官方正式的。

所以我们只要顺着这个思路解决就好了，目前的解决办法有两个

1.增加目标选项

对于windows来说，找到chrome的快捷方式，在属性–>目标里面添加–allow-file-access-from-files就可以了，

mac的话网上说在终端进行这个操作，但是我的黑果上行不通，这里就不给大家指歪路了。

3.放到tomcat上运行

既然本地跑不通，我们就放在服务器程序上，然后通过访问服务器接口理论上是可以的

3.使用anywhere插件

其实这个和tomcat的思路差不多，就是这个是一个npm的插件，会比tomcat方便一些，
可以使用npm安装

$ npm install anywhere -g 

最好是全局安装，这样以后用也方便
然后切换到html文件所在的文件夹，运行

$ anywhere 

运行后一般会自动跳转到浏览器上，终端上会显示一个运行的网址，你也可以在其他地方调试。

感谢
https://blog.csdn.net/superit401/article/details/72772658
提供解决思路