在学习模块化的时候遇到的一个问题,ES6引入的时候出现了这种问题
Access to script at 'file:///E:/DUYI/Code/NOTE/levelOne/13.%E6%A8%A1%E5%9D%97%E5%8C%96%E8%AF%A6%E7%BB%86/04ES6%E6%A8%A1%E5%9D%97%E5%8C%96/03%E9%BB%98%E8%AE%A4%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BA/module/index.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.
本地跨域仅支持ajax跨域只支持这些协议框架:http,https,data,chrome(Chrome浏览器),chrome-extension(Chrome扩展插件),chrome-extension-resource(Chrome扩展资源),就是没有file协议
原因就是浏览器在访问本地JS文件的时候遇到了跨域的问题,我们这种引入方式属于file协议,但是上面的报错信息提示是:
<script type="module" src="./js/main.js" type="text/javascript" charset="utf-8"></script>
使用以下解决方法之前,可以先让代码使用 **Open With Live Server**方式运行
通过查阅资料找到了这三种方法:
1.对于windows来说,找到chrome的快捷方式,在属性–>目标里面添加–allow-file-access-from-files就可以了
2.放到TOMCAT上运行。既然本地跑不通,我们就放在服务器程序上,然后通过访问服务器接口理论上是可以的
3.使用ANYWHERE插件。其实这个和tomcat的思路差不多,就是这个是一个npm的插件,会比tomcat方便一些,
可以使用npm安装
$ npm install anywhere -g
最好是全局安装,这样以后用也方便,然后切换到html文件所在的文件夹,运行
$ anywhere
运行后一般会自动跳转到浏览器上,终端上会显示一个运行的网址,你也可以在其他地方调试。