file 協議致使的跨域問題以及解決方案

問題復現:學習 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

看起來是跨域問題,也就是隻支持 httphttps 等這種類型的跨域請求,不支持 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 必須合法 —— 也就是必須帶有 httphttps 等,以用來代表請求源。

可是別忘了,咱們如今是在本地打開文件,使用的不是 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源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索