
問題復現:學習 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源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。