欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年07月22日 11:19:09   作者：C_心欲無痕  
這篇文章主要介紹了JS中關(guān)于ES6?Module模塊化的跨域報錯,ES6模塊化提供了export命令和import?命令，對于模塊的導(dǎo)出和引入，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

在這里插入圖片描述

ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，旨在成為瀏覽器和服務(wù)器通用的模塊解決方案。其模塊功能主要由兩個命令構(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)生的問題：直接在瀏覽器打開是會觸發(fā)跨域報錯的，如下：

在這里插入圖片描述

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

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

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

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

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

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

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

在這里插入圖片描述

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

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

如下圖：

在這里插入圖片描述

解決辦法

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

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

在這里插入圖片描述

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

為什么前端要使用模塊化

我們定義兩個文件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>

很顯然，瀏覽器會直接報錯，因為你重復(fù)定義變量。

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

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

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

ES6模塊化有以下特點：

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

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

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

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

模塊化的使用

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

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

相關(guān)文章

  • JavaScript處理數(shù)組數(shù)據(jù)的示例詳解

    JavaScript處理數(shù)組數(shù)據(jù)的示例詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript如何處理數(shù)組數(shù)據(jù),包括數(shù)據(jù)匹配和剔除,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下
    2023-10-10
  • 通過location.replace禁止瀏覽器后退防止重復(fù)提交

    通過location.replace禁止瀏覽器后退防止重復(fù)提交

    如果用戶重復(fù)提交事件，然后又后退，這樣可能會對某些數(shù)據(jù)產(chǎn)生災(zāi)難性的問題。所以今天就向大家介紹一種通過location.replace禁止瀏覽器后退按鈕的方法
    2014-09-09
  • 微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能

    微信小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能

    這篇文章主要介紹了小程序使用canvas自適應(yīng)屏幕畫海報并保存圖片功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • 全面解析Bootstrap中Carousel輪播的使用方法

    全面解析Bootstrap中Carousel輪播的使用方法

    這篇文章主要為大家詳細(xì)的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-06-06
  • JS求解兩數(shù)之和算法詳解

    JS求解兩數(shù)之和算法詳解

    這篇文章主要介紹了JS求解兩數(shù)之和算法,結(jié)合實例形式詳細(xì)分析了JS求解兩數(shù)之和算法相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
    2020-04-04
  • 教你使用webpack打包編譯TypeScript代碼

    教你使用webpack打包編譯TypeScript代碼

    TypeScript同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TypeScript，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2021-06-06
  • Electron實現(xiàn)應(yīng)用打包、自動升級過程解析

    Electron實現(xiàn)應(yīng)用打包、自動升級過程解析

    這篇文章主要介紹了Electron實現(xiàn)應(yīng)用打包、自動升級過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • Js中var,let,const的區(qū)別你知道嗎

    Js中var,let,const的區(qū)別你知道嗎

    眾所周知在Javascript中,var、let、const都可用于變量聲明,但是之前沒有梳理過它們之間的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Js中var,let,const區(qū)別的相關(guān)資料,需要的朋友可以參考下
    2023-02-02
  • 如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

    如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)

    在開發(fā)過程中,可能會遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換
    2024-09-09
  • 使用HTML5+Boostrap打造簡單的音樂播放器

    使用HTML5+Boostrap打造簡單的音樂播放器

    這篇文章主要介紹了使用HTML5+Boostrap打造簡單的音樂播放器 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-08-08

最新評論