es6模块化遇到的小问题与解决

1. es6 模块化遇到的小问题与解决

1.1. es6 模块化的简单使用

有多种语法，但这里不讨论语法，所以只展示一种写法

1.1.1. 导出

在模块化脚本导出需要暴露出去的变量或其他

let flag = true;

export { flag }

1.1.2. 导入

1. 在需要使用之前导出的变量的脚本内导入

import {flag} from "./config.js"

2. 在 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. 结论

由于同源策略的限制，可以从服务器端去运行项目文件