問題復現：學習 ES6 模塊化的時候，寫了這段代碼：javascript
<script src="./aaa.js" type="module"></script>
<script src="./bbb.js" type="module"></script>
<script src="./aaa2.js" type="module"></script>
結果跑到 chrome 下面一看，報錯了：html
看起來是跨域問題，也就是隻支持 http，https 等這種類型的跨域請求，不支持 file 協議類型的（直接本地打開文件）。解決方案以下：前端
1.給 chrome 快捷方式添加參數：–allow-file-access-from-files實測無效。貌似還得重啓電腦，太麻煩了，遂放棄。java
2.換瀏覽器。通過測試，Edge 能夠正常顯示，但 FireFox 仍是報跨域錯誤：web
3.用 IDE。像 Webstrom 這類型的 IDE 是內置 http 服務器的，這樣能夠不經過 file 協議打開文件，不過這個仍是有點麻煩，我沒嘗試。chrome
4.使用熱更新插件。恰好想起編輯器裏安裝了 live server 這個插件，這個實際上是作同步刷新用的，可是因爲它能夠在本地開啓一個服務器，因此能夠利用這一點（localhost 訪問）。嘗試以後發現確實不報錯了。express
5.Node 開一個服務器跨域
// server.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.get('/',function (req,res) {
res.send('./index.html',{root:__dirname});
})
app.listen(8203);
問題是解決了，但總以爲內心不踏實，因此開始了艱苦的 google 之旅，最後算是找到了問題的根源。但我仍是想從同源策略開始解釋：瀏覽器
「同源策略（Same origin policy），是出於安全而誕生的一種約定，規定了只能在本域內進行資源訪問。所謂同源是指"協議+域名+端口"三者相同。安全
不一樣源之間進行資源訪問，就須要跨域。特殊地，有三個標籤默認是容許跨域加載資源的：
-
<img src="xxx"> -
<link href="xxx"> -
<script src="xxx">
關鍵來了，ES6 使用模塊的時候要在標籤中聲明 type="module"，而這類使用了模塊的 script 是受限於同源策略的。咱們嘗試改動以前的代碼以下：
<script src="./aaa.js" type="module" defer="defer"></script>
<script src="./bbb.js" type="module" defer="defer"></script>
<script src="./ccc.js" type="text/javascript" defer="defer"></script>
能夠看到，前面兩個 script 使用了模塊，Sec-Fetch-Mode 都是 cors，而最後一個就是常規的引入腳本，不受同源策略影響，所以是 no-cors。
咱們能夠理解爲前兩個 scirpt 發送了 Cors 跨域資源請求，而這種請求要求 request header 的 origin 必須合法 —— 也就是必須帶有 http，https 等，以用來代表請求源。
可是別忘了，咱們如今是在本地打開文件，使用的不是 http 協議，而是 file 協議，它根本就沒有跨域請求須要的 origin（注意看上圖，origin 是空的）。因此，這種狀況就要報錯了。其實從報錯信息中也能讀出這一點。
那麼，咱們如今用 live server 在本地開啓服務器，再看一下控制檯：
能夠看到，由於此次不是用 file 協議訪問了，因此一切正常。
參考：
Understanding ES6
ModulesES6 module support in Chrome 62/Chrome Canary 64, does not work locally, CORS error
Access to Image from origin 'null' has been blocked by CORS policy
本文分享自微信公衆號 - 漫遊前端世界（gh_6ac344b74a01）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。