剛開始做前端的朋友應該會遇到這個問題，本地頁面在請求本地文件時會出現這個報錯:
嗯，熟悉的單詞，熟悉的跨域。
爲什麼會跨域呢？
因爲這裏使用的是 file: 協議，由於不存在 host，所以無法遵循瀏覽器同源策略，但是可以通過 XMLHttpRequest 對本地其他文件進行操作。但是這種操作是有風險的，因爲也可以對互聯網的其他資源做同樣的操作。所以 Chrome 瀏覽器（WebKit 內核）禁用了本地的 file: 協議訪問，它覺得 file: 這種訪問是不安全的，就給禁掉了。這就決定了 file: 協議訪問的應用無法使用 XMLHttpRequest 對象，並且明確說明了跨域請求僅支持以下協議：http, data, chrome, chrome-extension, https。
那我就是要加載本地的文件怎麼辦？
1.使用 Firefox 瀏覽器，其允許訪問同目錄與子目錄裏的文件。
2.開啓一個 Server，以 http 協議進行訪問，繞過 file: 的限制。
當然對不同的開發工具有不同的開啓方式，使用HBuilder和webStrom的朋友應該沒有這個煩惱因爲工具自帶http服務，對於 Sublime Text，可以使用插件 SublimeServer；對於 VSCode，使用插件 Live Server；當然啦，我們可以直接用 node 開啓一個 http 服務。