1. es6 模块化遇到的小问题与解决
1.1. es6 模块化的简单使用
有多种语法,但这里不讨论语法,所以只展示一种写法
1.1.1. 导出
在模块化脚本导出需要暴露出去的变量或其他
let flag = true;
export { flag }
1.1.2. 导入
- 在需要使用之前导出的变量的脚本内导入
import {flag} from "./config.js"
- 在 index.html 中引入 js 文件需要加上 type=“module”
<script src="config.js" type="module"></script>
<script src="index.js" type="module"></script>
1.1.3. 运行
在浏览器中打开index.html
1.2. 问题
在浏览器中直接运行index.html时,发现控制台报错
Access to script at 'file:///H:/vue/%E6%A8%A1%E5%9D%97%E5%8C%96/%E5%AF%BC%E5%87%BA%E4%B8%8E%E5%AF%BC%E5%85%A5/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.
index.html:12 GET file:///H:/vue/%E6%A8%A1%E5%9D%97%E5%8C%96/%E5%AF%BC%E5%87%BA%E4%B8%8E%E5%AF%BC%E5%85%A5/main.js net::ERR_FAILED
1.3. 原因
- JavaScript Modules是被“同源策略”(Same-origin policy)保护的,所以无法使用本地文件。
- 同源策略,它是由Netscape提出的一个著名的安全策略。它限制网页中的js只能访问同一个源下的资源,同协议,同域名,同端口才可以认为是同一个源
- CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。用于解决在同源策略下不同源共享资源的问题。
- javaScript Modules是使用CORS来实现资源共享的
1.4. 解决
1.4.1. 解决方法一
1.4.1.1. 步骤
经百度后发现,因为同源策略的限制,我们无法使用浏览器直接打开本地文件的方式开发了,我们需要搭建一个本地的简单静态Server,通过下列命令
# 安装
npm install -g http-server
# 到项目目录下
cd xxx
# 把当前目录作为网站根目录,建立一个静态资源服务器
http-server
然后访问控制台提示的域名
1.4.1.2. 结果
失败!无法打开该域名,具体原因还没查
1.4.2. 解决方法二
1.4.2.1. 步骤
经过上一个方法的提示,是不是只要在服务器上运行就可以呢?正好之前装过一个wamp,将项目文件拷贝到wamp运行目录www下,从服务器端运行该项目。
1.4.2.2. 结果
运行成功!
1.4.3. 结论
由于同源策略的限制,可以从服务器端去运行项目文件