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

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

1.1. es6 模块化的简单使用

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

1.1.1. 导出

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

let flag = true;

export { flag }

1.1.2. 导入

  1. 在需要使用之前导出的变量的脚本内导入
import {flag} from "./config.js"
  1. 在 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. 结论

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值