vue 基础学习

一、ref 和reactive 区别

问题:发生跨域问题

Access to script at 'file:///Users/new/Desktop/webroot/vue/vue.esm-browser.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

这个报错表明你遇到了跨域相关的问题,以下是对该报错的详细分析以及解决办法:

报错原因

当你在浏览器中直接通过 file:// 协议(本地文件协议)去加载一个 JavaScript 文件(这里是 vue.esm-browser.js),并且该文件中的代码尝试进行一些跨域相关的操作(比如加载其他资源、发起 Ajax 请求等,虽然在你这个例子里可能只是模块加载的情况,但本质上涉及到了同源策略的限制)时,浏览器的同源策略就会起作用。

同源策略要求协议、域名和端口都要相同才允许进行资源交互,而 file:// 协议下的页面被认为是没有明确的 “源”(origin 为 null),它与正常的网络请求所遵循的 httphttps 等协议的交互机制不同,浏览器默认是禁止 file:// 协议下的跨域操作的,所以就会出现被 CORS(跨域资源共享)政策阻止的情况,提示只支持 chromechrome-extensionchrome-untrusteddatahttphttpsisolated-app 这些协议方案下的跨域请求。

解决办法

以下是几种常见的解决思路:

1. 使用本地服务器来运行项目
  • 原理
    将项目通过本地服务器(比如基于 Node.js 的 http-serverlive-server 等工具,或者使用集成开发环境自带的服务器功能,如 WebStorm 等 IDE 可以方便地启动本地服务器)以 http 协议来运行,这样就符合了浏览器跨域策略中支持的协议类型,能避免 file:// 协议带来的跨域限制问题。
  • 示例操作(以 http-server 为例)
    • 首先确保已经安装了 http-server,如果没安装,可以通过 npm install -g http-server(全局安装,前提是已经安装了 Node.js 和 npm)命令来安装。
    • 打开命令行,进入到包含 vue.esm-browser.js 文件的项目根目录(例如在你的例子中就是 /Users/new/Desktop/webroot/vue/ 这个目录),然后运行 http-server 命令。
    • 之后 http-server 会启动并显示一个本地的访问地址(一般是类似 http://localhost:8080 这样的形式,端口可能会根据实际情况不同),通过浏览器访问这个地址来查看你的项目,此时应该就不会出现上述跨域报错了,因为模块加载等操作都在 http 协议下进行,符合跨域策略要求。

2. 配置浏览器允许跨域访问本地文件(不太推荐,存在安全风险)
  • 原理
    对于一些特定的浏览器(如 Chrome),可以通过设置一些特定的启动参数或者安装扩展来放宽对本地文件跨域访问的限制,但这种方式会降低浏览器的安全性,因为它绕过了原本的安全策略,所以一般只建议在开发测试环境且明确知晓风险的情况下使用。
  • 示例操作(以 Chrome 为例)
    • 方法一:使用命令行参数启动
      在终端中通过添加 --disable-web-security 和 --user-data-dir 参数来启动 Chrome,例如(在 macOS 或 Linux 下):
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=/tmp/chromeTemp

(在 Windows 下类似地找到 Chrome 的可执行文件路径并添加参数启动),不过这种方式每次启动 Chrome 都需要这样操作,不太方便。

  • 方法二:使用扩展(有一些专门用于开发时临时解决跨域问题的扩展,如 Allow CORS: Access-Control-Allow-Origin 等)
    先在 Chrome 网上应用店中搜索安装这类扩展,安装后在扩展的设置中启用对本地文件的跨域访问权限等相关配置,这样在使用 Chrome 访问本地文件时就可能绕过跨域限制了,但要记得在正式环境不要使用这类扩展,避免安全隐患。

总之,推荐优先采用使用本地服务器运行项目的方式来解决这个问题,既能保证安全性,又符合正常的网页开发和跨域规范。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AIA - IMSIC之二(附IMSIC处理流程图)

本文属于《 RISC-V指令集基础系列教程》之一,欢迎查看其它文章。 1 ​​​​​​​通过IMSIC接收外部中断的CSR 软件通过《AIA - 新增的CSR》描述的CSR来访问IMSIC。 machine level 的 CSR 与 IMSIC 的 machine level interrupt file 可相互互动;而 supervisor level 的 CSR…

光谱相机的工作原理

光谱相机的工作原理主要基于不同物质对不同波长光的吸收、反射和透射特性存在差异,以下是其具体工作过程: 一、光的收集 目标物体在光源照射下,其表面会对光产生吸收、反射和透射等相互作用。光谱相机的光学系统(如透镜、反射镜…

Kafka可视化工具 Offset Explorer (以前叫Kafka Tool)

数据的存储是基于 主题(Topic) 和 分区(Partition) 的 Kafka是一个高可靠性的分布式消息系统,广泛应用于大规模数据处理和实时, 为了更方便地管理和监控Kafka集群,开发人员和运维人员经常需要使用可视化工具…

TLDR:终端命令的简洁百科全书

TLDR,全称 “Too Long, Don’t Read”,是一款特别实用的终端命令百科全书工具。通过 TLDR,您可以快速查找到常用命令的使用方法,避免繁琐冗长的官方文档,让日常工作更加高效。 为什么选择 TLDR? 简单易用&…

2024-12-25-sklearn学习(20)无监督学习-双聚类 料峭春风吹酒醒,微冷,山头斜照却相迎。

文章目录 sklearn学习(20) 无监督学习-双聚类1 Spectral Co-Clustering1.1 数学公式 2 Spectral Biclustering2.1 数学表示 3 Biclustering 评价 sklearn学习(20) 无监督学习-双聚类 文章参考网站: https://sklearn.apachecn.org/ 和 https://scikit-learn.org/sta…

数据结构(Java版)第六期:LinkedList与链表(一)

目录 一、链表 1.1. 链表的概念及结构 1.2. 链表的实现 专栏:数据结构(Java版) 个人主页:手握风云 一、链表 1.1. 链表的概念及结构 链表是⼀种物理存储结构上⾮连续存储结构,数据元素的逻辑顺序是通过链表中的引⽤链接次序实现的。与火车…

《Java核心技术I》Swing的网格包布局

复杂的布局管理 网格包布局 行列大小可改变,先建立表格,合并相邻单元格,组件指定在格内的对齐方式。 字体选择器组件: 另个指定字体和字体大小的组合框两个组合框标签两个选择粗体和斜体的复选框一个显示示例字符串的文本区 将容…

Python——day09

os模块 sys模块 time模块 logging模块

IIC驱动EEPROM

代码参考正点原子 i2c_dri:主要是三段式状态机的编写 module iic_dri#(parameter SLAVE_ADDR 7b1010000 , //EEPROM从机地址parameter CLK_FREQ 26d50_000_000, //模块输入的时钟频率parameter I2C_FREQ 18d250_000 //IIC_SCL的时钟频率)( …

《计算机组成及汇编语言原理》阅读笔记:p86-p115

《计算机组成及汇编语言原理》学习第 6 天,p86-p115 总结,总计 20 页。 一、技术总结 1.if statement 2.loop 在许多编程语言中,有类种循环:一种是在程序开头检测条件(test the condition),另一种是在程序末尾检测条件。 3.C…

(带源码)宠物主题商场系统 计算机项目 P10083

项目说明 本号所发布的项目均由我部署运行验证,可保证项目系统正常运行,以及提供完整源码。 如需要远程部署/定制/讲解系统,可以联系我。定制项目未经同意不会上传! 项目源码获取方式放在文章末尾处 注:项目仅供学…

目标检测——基于yolov8和pyqt的螺栓松动检测系统

目录 1.项目克隆和环境配置1.1 我这里使用的是v8.0.6版本1.2 项目代码结构介绍 2.数据集介绍2.1 数据集采集2.2采集结果介绍 3.模型训练4.pyqt界面设计4.1 界面内容介绍4.2 界面实现 5.操作中的逻辑实现5.1 图片检测5.2 文件夹检测5.3 视频检测和摄像头检测 6. 效果展示 1.项目…

宠物行业的出路:在爱与陪伴中寻找增长新机遇

在当下的消费市场中,如果说有什么领域能够逆势而上,宠物行业无疑是一个亮点。当人们越来越注重生活品质和精神寄托时,宠物成为了许多人的重要伴侣。它们不仅仅是家庭的一员,更是情感的寄托和生活的调剂。然而,随着行业…

原点安全再次入选信通院 2024 大数据“星河”案例

近日,中国信息通信研究院和中国通信标准化协会大数据技术标准推进委员会(CCSA TC601)共同组织开展的 2024 大数据“星河(Galaxy)”案例征集活动结果正式公布。由工银瑞信基金管理有限公司、北京原点数安科技有限公司联…

【0x001D】HCI_Read_Remote_Version_Information命令详解

目录 一、命令概述 二、命令格式及参数说明 2.12. HCI_Read_Remote_Version_Information 命令格式 2.2. Connection_Handle 三、生成事件 3.1. HCI_Command_Status 事件 3.2. HCI_Read_Remote_Version_Information_Complete 事件 四、命令执行流程 4.1. 命令发起阶段(…

C语言-结构体内存大小

#include <stdio.h> #include <string.h> struct S1 { char a;//1 int b;//4 char c;//1 }; //分析 默认对齐数 成员对齐数 对齐数(前两个最小值) 最大对齐数 // 8 1 …

直流电源如何输出恒压源和恒流源

输出电流达到预定值时&#xff0c;变成稳流特性。 输出电压达到预定值时&#xff0c;变成稳压特性。 电流变大&#xff0c;成稳压。 电压变大&#xff0c;成稳流。

【软考高级】系统架构设计师复习笔记-精华版

文章目录 前言0 系统架构设计师0.1 考架构还是考系分0.2 架构核心知识0.3 架构教材变化 1 计算机操作系统1.1 cpu 组成1.2 内核的五大功能1.3 流水线技术1.4 段页式存储1.5 I/O 软件1.6 文件管理1.7 系统工程相关 2 嵌入式2.1 嵌入式技术2.2 板级支持包&#xff08;BSP&#xf…

如何识别钓鱼邮件和诈骗网站?(附网络安全意识培训PPT资料)

识别钓鱼邮件和诈骗网站是网络安全中的一个重要环节。以下是一些识别钓鱼邮件和诈骗网站的方法&#xff1a; 识别钓鱼邮件&#xff1a; 检查发件人地址&#xff1a; 仔细查看发件人的电子邮件地址&#xff0c;看是否与官方域名一致。 检查邮件内容&#xff1a; 留意邮件中是否…

查询 MySQL 默认的存储引擎(SELECT @@default_storage_engine;)

要查询 MySQL 默认的存储引擎&#xff0c;可以使用以下 SQL 查询语句&#xff1a; SELECT default_storage_engine;解释&#xff1a; SELECT: 表示你要执行一个查询。default_storage_engine: 这是一个 MySQL 系统变量&#xff0c;它存储着当前 MySQL 服务器的默认存储引擎。…