在浏览器使用npm包已拦截跨源请求，此文档不允许使用模块来源的

报错：

Access to script at 'file:///E:/Web/用ES6导入第三方模块/01/mycharts.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.
mycharts.js:1          Failed to load resource: net::ERR_FAILED

问题在于：

在本地使用type=module的时候会提示跨域的问题

type=module的作用：

在script标签中写js代码，或者使用src引入js文件时，默认不能使用module形式，即不能使用import导入文件，但是我们可以再script标签上加上type=module属性来改变方式。

带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

浏览器使用ES6模块的语法如下。

<script type="module" src="https://blog.csdn.net/weixin_56844906/article/details/foo.js"></script>
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个ES6模块。

Node的默认模块格式是CommonJS，目前还没决定怎么支持ES6模块。所以，只能通过Babel这样的转码器，在Node里面使用ES6模块

影响：

html使用type = ‘module’ 默认会产生跨域请求，本地打开的文件，file协议不支持

（file协议是什么：File协议主要用于访问本地计算机中的文件，就如同在Windows资源管理器中打开文件一样。）

如何解决：

安装live-serve插件，在本地创建一个服务器运行即可。

（如何使用live-serve插件：一款npm工具，全局npm i -g server后，项目目录使用live-server命令行工具可直接在浏览器中预览‘它默认找index.html，其他的要带上文件名空格后跟在后面，并且自动全局监听实时更新’）

收获：

原来，在HTML中可以通过使用<script>标签引入js文件

而，不能用上面的两张截图的方式，直接使用npm下载的第三方模块。它只能在node.js的环境下使用，不能导进浏览器html页面里

但是，在node,js 生态环境下，第三方包需要使用npm安装，然后在代码通过require导入，最后再用webpack打包编译成能直接在浏览器中运行的javascript代码（或者在代码少量的情况下，使用browserify）

这篇好文章是转载于：学新通技术网