JS中關于ES6?Module模塊化的跨域報錯問題解決
ES6 在語言標準的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當簡單，旨在成為瀏覽器和服務器通用的模塊解決方案。其模塊功能主要由兩個命令構成：
export或export default和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。
ES模塊化的標志也很簡單，就是在script標簽上面 添加 type="module"屬性；
<!DOCTYPE HTML> <html lang='en'> <head> <meta charset="UTF-8" /> <!-- 引入 --> <script src="./a.js" type="module"></script> </head> </html>
從而產生的問題：直接在瀏覽器打開是會觸發(fā)跨域報錯的，如下：
首先，我們要明白是什么導致了跨域，根據(jù)內容翻譯：
來自orgin的null已被CORS策略(同源策略)阻止:跨源請求只支持協(xié)議方案:http，數(shù)據(jù)，chrome, chrome-extension, https。
（注意：這種跨域報錯和普通后端接口跨域報的錯并不一樣，不要搞混了，此處明顯說明了Orgin為null）
我們知道，我們的html文是在本地打開的文件（所以協(xié)議是file協(xié)議），而file協(xié)議并不會產生跨域。但是，http, data, chrome, chrome-extension, https這些協(xié)議都是會產生跨域請求的。
什么是file文件協(xié)議：
file協(xié)議就是本地文件傳輸協(xié)議，主要的目的就是用于訪問本地計算機中的文件，好比通過Windows的資源管理器中打開文件或者通過右鍵單擊‘打開’一樣。然后通過file:///文件路徑這樣的形式去訪問；
比如在文件資源管理器的地址欄輸入 file:///C:/Log 就是相當于尋找C盤下面的Log文件夾，相當于：C:\Log；如下圖所示：
而當你在某盤符位置下直接打開一個網頁(script標簽中引入了某地的某個js文件)，則在瀏覽器地址欄呈現(xiàn)：
file:///C:/Users/EDY/Desktop/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B7/module/a.js ；
如下圖顯示：
至于 ES6使用 type="module"產生的跨域問題其實是：
ES6 使用模塊的時候要在標簽中聲明
type="module"，而這類使用了模塊的script是受限于同源策略的，默認會發(fā)起cors跨域請求，問題來了，這種請求要求request header（請求頭）的Origin必須帶有http等類型，但是file協(xié)議下，Origin 是 null，所以不符合要求，就會報上面的跨域報錯。
如下圖：
解決辦法
說了那么多怎么解決es6 module這個跨域的問題呢？
我們測試的時候使用 vs code擴展 “Live Serve”打開即可：也就是啟動一個本地服務器；如下：一切正常：
當然，我們日常開發(fā)過程中用的都是vue，react框架；這些框架里面的構建工具或者webpack都已經把這些問題解決了，所以我們在項目中正常使用就行了；無需操心這種問題，但需要知道；
為什么前端要使用模塊化
我們定義兩個文件a.js和b.js 。
a.js:
let myName="Eula";
let age=20;
console.log("myName:"+myName+" age:"+age+" in a.js")b.js:
let myName="Umbar";
let age=20;
console.log("myName:"+myName+" age:"+age+" in b.js")然后我們在html里面引入這兩個js文件（先不使用ES6模塊化）
<!DOCTYPE HTML> <html lang='en'> <head> <meta charset="UTF-8" /> <!-- 引入 --> <script src="./a.js"></script> <script src="./b.js"></script> </head> </html>
很顯然，瀏覽器會直接報錯，因為你重復定義變量。
報錯信息：Uncaught SyntaxError: Identifier 'myName' has already been declared (at b.js:1:1)
這時候，只需要在引入js的時候添加type屬性，并且設置類型為module就可以解決變量重復的問題了。瀏覽器認為你是兩個模塊的變量，是互相獨立的。這就是ES6提供的模塊化支持。
<script src="./a.js" type="module"></script> <script src="./b.js" type="module"></script>
ES6模塊化有以下特點：
（1）ES6模塊自動開啟嚴格模式，不管你有沒有在模塊頭部加上"use strict"。
（2）模塊中可以導入和導出各種類型的變量，如函數(shù)，對象，字符串，數(shù)字，布爾值，類等。
（3）每個模塊都有自己的上下文，每一個模塊內聲明的變量都是局部變量，不會污染全局作用域。
（4）每一個模塊只加載一次（是單例的）， 若再去加載同目錄下同文件，直接從內存中讀取。
模塊化的使用
ES6模塊化提供了 export命令 和 import 命令，對于模塊的導出和引入；詳細使用可以見這篇文檔：CommonJs和ES6 module的使用和區(qū)別
到此這篇關于JS中關于ES6 Module模塊化的跨域報錯的文章就介紹到這了,更多相關js ES6模塊化跨域報錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript處理數(shù)組數(shù)據(jù)的示例詳解
這篇文章主要為大家詳細介紹了JavaScript如何處理數(shù)組數(shù)據(jù),包括數(shù)據(jù)匹配和剔除,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下2023-10-10
通過location.replace禁止瀏覽器后退防止重復提交
如果用戶重復提交事件，然后又后退，這樣可能會對某些數(shù)據(jù)產生災難性的問題。所以今天就向大家介紹一種通過location.replace禁止瀏覽器后退按鈕的方法2014-09-09
這篇文章主要介紹了小程序使用canvas自適應屏幕畫海報并保存圖片功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了JS求解兩數(shù)之和算法,結合實例形式詳細分析了JS求解兩數(shù)之和算法相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-04-04
TypeScript同樣也可以結合構建工具一起使用，下邊以webpack為例介紹一下如何結合構建工具使用TypeScript，本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧2021-06-06
這篇文章主要介紹了Electron實現(xiàn)應用打包、自動升級過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
眾所周知在Javascript中,var、let、const都可用于變量聲明,但是之前沒有梳理過它們之間的區(qū)別,下面這篇文章主要給大家介紹了關于Js中var,let,const區(qū)別的相關資料,需要的朋友可以參考下2023-02-02
在開發(fā)過程中,可能會遇到需要將一維數(shù)組轉換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結構的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉換成三維數(shù)組結構,以適應特定的UI展示需求,通過循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實現(xiàn)數(shù)組結構的轉換2024-09-09
這篇文章主要介紹了使用HTML5+Boostrap打造簡單的音樂播放器 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08