快捷導(dǎo)航

JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò)問題解決

更新時(shí)間：2023年07月22日 11:19:09 作者：C_心欲無痕

這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報(bào)錯(cuò),ES6模塊化提供了export命令和import?命令，對于模塊的導(dǎo)出和引入，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

ES6 在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡單，旨在成為瀏覽器和服務(wù)器通用的模塊解決方案。其模塊功能主要由兩個(gè)命令構(gòu)成：export或export default和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

ES模塊化的標(biāo)志也很簡單，就是在script標(biāo)簽上面添加 type="module"屬性；

<!DOCTYPE HTML>
<html lang='en'>
	<head>
		<meta charset="UTF-8" />
		<!-- 引入 -->
		<script src="./a.js" type="module"></script>
	</head>
</html>

從而產(chǎn)生的問題：直接在瀏覽器打開是會(huì)觸發(fā)跨域報(bào)錯(cuò)的，如下：

在這里插入圖片描述

首先，我們要明白是什么導(dǎo)致了跨域，根據(jù)內(nèi)容翻譯：

來自orgin的null已被CORS策略(同源策略)阻止:跨源請求只支持協(xié)議方案:http，數(shù)據(jù)，chrome, chrome-extension, https。

（注意：這種跨域報(bào)錯(cuò)和普通后端接口跨域報(bào)的錯(cuò)并不一樣，不要搞混了，此處明顯說明了Orgin為null）

我們知道，我們的html文是在本地打開的文件（所以協(xié)議是file協(xié)議），而file協(xié)議并不會(huì)產(chǎn)生跨域。但是，http, data, chrome, chrome-extension, https這些協(xié)議都是會(huì)產(chǎn)生跨域請求的。

什么是file文件協(xié)議：

file協(xié)議就是本地文件傳輸協(xié)議，主要的目的就是用于訪問本地計(jì)算機(jī)中的文件，好比通過Windows的資源管理器中打開文件或者通過右鍵單擊‘打開’一樣。然后通過file:///文件路徑這樣的形式去訪問；

比如在文件資源管理器的地址欄輸入 file:///C:/Log 就是相當(dāng)于尋找C盤下面的Log文件夾，相當(dāng)于：C:\Log；如下圖所示：

在這里插入圖片描述

而當(dāng)你在某盤符位置下直接打開一個(gè)網(wǎng)頁(script標(biāo)簽中引入了某地的某個(gè)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"產(chǎn)生的跨域問題其實(shí)是：

ES6 使用模塊的時(shí)候要在標(biāo)簽中聲明 type="module"，而這類使用了模塊的 script 是受限于同源策略的，默認(rèn)會(huì)發(fā)起cors跨域請求，問題來了，這種請求要求 request header（請求頭） 的 Origin 必須帶有 http 等類型，但是 file 協(xié)議下，Origin 是 null，所以不符合要求，就會(huì)報(bào)上面的跨域報(bào)錯(cuò)。

如下圖：

在這里插入圖片描述

解決辦法

說了那么多怎么解決es6 module這個(gè)跨域的問題呢？

我們測試的時(shí)候使用 vs code擴(kuò)展 “Live Serve”打開即可：也就是啟動(dòng)一個(gè)本地服務(wù)器；如下：一切正常：

在這里插入圖片描述

當(dāng)然，我們?nèi)粘ｉ_發(fā)過程中用的都是vue，react框架；這些框架里面的構(gòu)建工具或者webpack都已經(jīng)把這些問題解決了，所以我們在項(xiàng)目中正常使用就行了；無需操心這種問題，但需要知道；

為什么前端要使用模塊化

我們定義兩個(gè)文件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里面引入這兩個(gè)js文件（先不使用ES6模塊化）

<!DOCTYPE HTML>
<html lang='en'>
	<head>
		<meta charset="UTF-8" />
		<!-- 引入 -->
		<script src="./a.js"></script>
		<script src="./b.js"></script>
	</head>
</html>

很顯然，瀏覽器會(huì)直接報(bào)錯(cuò)，因?yàn)槟阒貜?fù)定義變量。

報(bào)錯(cuò)信息：Uncaught SyntaxError: Identifier 'myName' has already been declared (at b.js:1:1)

這時(shí)候，只需要在引入js的時(shí)候添加type屬性，并且設(shè)置類型為module就可以解決變量重復(fù)的問題了。瀏覽器認(rèn)為你是兩個(gè)模塊的變量，是互相獨(dú)立的。這就是ES6提供的模塊化支持。

<script src="./a.js" type="module"></script>
<script src="./b.js" type="module"></script>

ES6模塊化有以下特點(diǎn)：

（1）ES6模塊自動(dòng)開啟嚴(yán)格模式，不管你有沒有在模塊頭部加上"use strict"。

（2）模塊中可以導(dǎo)入和導(dǎo)出各種類型的變量，如函數(shù)，對象，字符串，數(shù)字，布爾值，類等。

（3）每個(gè)模塊都有自己的上下文，每一個(gè)模塊內(nèi)聲明的變量都是局部變量，不會(huì)污染全局作用域。

（4）每一個(gè)模塊只加載一次（是單例的），若再去加載同目錄下同文件，直接從內(nèi)存中讀取。

模塊化的使用

ES6模塊化提供了 export命令和 import 命令，對于模塊的導(dǎo)出和引入；詳細(xì)使用可以見這篇文檔：CommonJs和ES6 module的使用和區(qū)別

到此這篇關(guān)于JS中關(guān)于ES6 Module模塊化的跨域報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)js ES6模塊化跨域報(bào)錯(cuò)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: