js - 关于ES6 Module模块化的跨域报错

news2024/12/23 5:18:42

在这里插入图片描述

ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成:exportexport defaultimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

ES模块化的标志也很简单,就是在script标签上面 添加 type="module"属性;

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

从而产生的问题:直接在浏览器打开是会触发跨域报错的,如下:

在这里插入图片描述

首先,我们要明白是什么导致了跨域,根据内容翻译:

来自orgin的null已被CORS策略(同源策略)阻止:跨源请求只支持协议方案:http,数据,chrome, chrome-extension, https。

(注意:这种跨域报错和普通后端接口跨域报的错并不一样,不要搞混了,此处明显说明了Orgin为null)

我们知道,我们的html文是在本地打开的文件(所以协议是file协议),而file协议并不会产生跨域。但是,http, data, chrome, chrome-extension, https这些协议都是会产生跨域请求的。

什么是file文件协议

file协议就是本地文件传输协议,主要的目的就是用于访问本地计算机中的文件,好比通过Windows的资源管理器中打开文件或者通过右键单击‘打开’一样。然后通过file:///文件路径这样的形式去访问;

比如在文件资源管理器的地址栏输入 file:///C:/Log 就是相当于寻找C盘下面的Log文件夹,相当于:C:\Log;如下图所示:

在这里插入图片描述
而当你在某盘符位置下直接打开一个网页(script标签中引入了某地的某个js文件),则在浏览器地址栏呈现:

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 是受限于同源策略的,默认会发起cors跨域请求,问题来了,这种请求要求 request header(请求头) Origin 必须带有 http 等类型,但是 file 协议下,Origin 是 null,所以不符合要求,就会报上面的跨域报错。

如下图:

在这里插入图片描述

解决办法

说了那么多怎么解决es6 module这个跨域的问题呢?

我们测试的时候使用 vs code扩展 “Live Serve”打开即可:也就是启动一个本地服务器;如下:
一切正常:

在这里插入图片描述
当然,我们日常开发过程中用的都是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)模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。

(3)每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。

(4)每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。


模块化的使用

ES6模块化提供了 export命令 和 import 命令,对于模块的导出和引入;详细使用可以见这篇文档:CommonJs和ES6 module的使用和区别

这里就不再赘述了;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/773135.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WPF 搜索框控件样式

WPF 搜索框控件样式 完全通过Xaml代码实现&#xff0c;使用了UserControl进行封装。功能包括聚焦时控件展开&#xff0c;输入为空时的文字提示&#xff0c;以及待选提示项列表等效果。实现效果如下图&#xff1a; xaml代码 <UserControl x:Class"SearchBar.SearchBo…

当在IDEA中实现类实现接口时,如果出现红色错误并且无法引入接口类的包,可能是以下几种情况导致的

1.当在IDEA中实现类实现接口时&#xff0c;如果出现红色错误并且无法引入接口类的包&#xff0c;可能是以下几种情况导致的&#xff1a; 2.缺少依赖&#xff1a;首先检查项目的依赖是否正确配置。如果接口类所在的包不在项目的依赖中&#xff0c;IDEA将无法找到该包并引入。可…

nginx系列第八篇:Ubuntu下验证nginx各请求处理阶段

Nginx处理请求的过程一共划分为11个阶段&#xff0c;按照执行顺序依次是 post-read、server-rewrite、find-config、rewrite、post-rewrite、preaccess、access、post-access、try-files、content 以及 log。 准备工作&#xff1a;host文件加入测试域名 sudo vi /etc/hosts 加入…

【Java从0到1学习】03 Java 基础知识

1. 关键字 关键字是编程语言里事先定义好并赋予了特殊含义的单词&#xff0c;也称作保留字。和其它语言一样&#xff0c;Java中保留了许多关键字&#xff0c;例如&#xff0c;class、public等&#xff0c;下面列举的是Java中所有的关键字。 1.1 关键字概述 被Java语言赋予特…

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法 我的VS版本是2022的&#xff0c;然后我今天把同事在VS2017上的code&#xff08;一个完整的解决方案&#xff09;从svn上拿过来。结果发现&#xff0c;一大堆E1696的错误。主要表现就是项目中include的一些常用的c语言基础…

【字节缓冲流】定义与使用

字节缓冲流 1.字节缓冲流 BufferOutputStream&#xff1a;该类实现缓冲输出流。通过设置这样的输出流&#xff0c;应用程序可以向底层输出流写入字节&#xff0c;而不必为写入的每个字节导致底层系统的调用BufferInputStream&#xff1a;创建BufferInputStream将创建一个内部…

<Linux开发> linux开发工具-之-I2C TOOLS工具使用

&#xff1c;Linux开发&#xff1e; linux开发工具-之-I2C TOOLS工具使用 &#xff1c;Android开发&#xff1e; Android开发工具- 之-I2C TOOLS工具使用 &#xff1c;Linux开发&#xff1e;驱动开发 -之- Linux I2C 驱动 一 前言 在笔者的另一篇文章 &#xff1c;Android开…

行为树(BEHAVIOR TREES)及其工业应用

顾名思义&#xff0c;行为树是描述事物&#xff08;人&#xff0c;动物&#xff0c;机器人&#xff0c;虚拟角色等等&#xff09;行为的树形结构。游戏行业使用行为树为角色行为建模。现在行为树建模技术正在向其它领域渗透&#xff0c;比如工业产线编排&#xff0c;机器人控制…

UKF无损卡尔曼滤波

摘要——卡尔曼滤波器为估计工程系统的状态提供了一项重要技术。由于非线性卡尔曼滤波器有多种变体&#xff0c;因此缺乏针对特定研究和工程应用的滤波器选择指南。 这就需要深入讨论不同非线性卡尔曼滤波器的复杂性。 实际状态估计应用特别感兴趣的是扩展卡尔曼滤波器 (EKF) 和…

五、DQL-1.概述

一、DQL介绍 Data Query Language 数据查询语言 用来查询数据库中表的记录。 查询关键字&#xff1a;SELECT 二、语法

TortoiseGit 入门指南11:还原与重置

Git 就像个时光机器&#xff0c;能让我们还原到任何提交。 还原未提交的更改 假如我们在查看一个干净的代码仓库&#xff0c;干净意味着工作区中的文件保持着最后一次提交的状态&#xff0c;没有修改。在查看的过程中&#xff0c;我们有意或无意的修改了工作区中的文件&#…

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(4)-Charles如何设置捕获会话

1.简介 前边几篇宏哥介绍了Charles界面内容以及作用。今天宏哥就讲解和分享如何设置Charles后&#xff0c;我们就可以愉快地捕获会话&#xff0c;进行抓包了。因为上一篇许多小伙伴看到宏哥的Charles可以分开看到request和response&#xff0c;而自己的却看不到&#xff0c;因…

WEB:FlatScience

背景知识 sql注入 SQLite数据库知识 SQLite3注入方法 题目 用dirsearch进行扫描&#xff0c;下面几个关键目录&#xff1a;robots.txt&#xff0c;login.php&#xff0c;admin.php&#xff0c;剩下的目录就是一些pdf格式的论文了 一个一个访问并查看源代码&#xff0c;在查看l…

23款奔驰S400豪华型升级4D旋转高音,提升车内氛围

奔驰加装4D旋转高音&#xff0c;让高音“有型有色”,高端4D环绕立体声音响系统的视觉效果同样令人印象深刻&#xff1a;系统启动时&#xff0c;安装在前车门后视镜三角板中的两个高音头会与同色车内氛围灯一块亮起&#xff0c;同时向外旋出10mm至最佳效果位置&#xff0c;以提高…

【AutoGluon_01】自动机器学习框架的安装与示例

文章目录 一、安装二、示例一 AutoGluon预测目标数据1、导入数据2、训练3、预测4、评估5、小结 三、示例二 AutoGluon多模态预测&#xff08;Multimodal Prediction&#xff09;1、导入数据2、训练3、预测4、评估 四、示例三 AutoGluon进行时间序列预测1、导入数据2、训练3、预…

【redis】redis管道简述

redis管道可以一次性发送多条命令。 命令示例如下&#xff1a; [xxxlocalhost ~]$ echo -e "set k4 99\nincr k4\nget k4" | nc localhost 6379 \OK :100 $3 100下面先简述一下这条命令的组成&#xff0c;再简述一下管道的常用场景和注意事项。 首先&#xff0c;|是…

跨越山海,爱在滇西|拓数派为滇西孩子点亮科学梦想

近日&#xff0c;拓数派在共青团浙江大学委员会、景东县教育体育局和景东团县委等单位指导下开展“爱在滇西”2023年公益助学活动&#xff0c;并携手浙大国际科创中心、浙大微纳电子学院、启真科技控股公司和北京德恒律所共同向景东浙大求是中学捐赠爱心助学金&#xff0c;用于…

微信小程序的目录解析--【浅入深出系列002】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择先说总目录经常碰到的文件(目录&#xff09;最最常见的目录pages次最常用的就是images 目录 操作起来真正的操作 配套资源 本系列校训 用免费公开视频&#xff0c;卷…

OpenCVForUnity(八)文本与随机数

文章目录 前言putText &#xff08;绘制文本&#xff09;randn &#xff08;正态分布随机数&#xff09;randu&#xff08;均匀分布随机数&#xff09;randShuffle &#xff08;数组随机重排&#xff09;结语 前言 本教程将介绍如何使用随机数生成器类RNG以及从均匀分布中获取随…

LIMA:小规模监督数据指令微调

论文标题&#xff1a;LIMA: Less Is More for Alignment 论文链接&#xff1a;https://arxiv.org/abs/2305.11206 论文来源&#xff1a;Meta AI 一、概述 语言模型在大规模语料上以预测下一个token的方式预训练&#xff0c;使它们能够学习可迁移到几乎任何语言理解或生成任务的…