当前位置: 首页 > news >正文

[qiankun+nuxt]子应用请求本地文件报错404

前言

目前公司的前端架构是qiankun+nuxt做的微前端项目

问题说明

在子应用中,前端需要模拟一些数据,方便后期演示调整而不需要重新打包
所以将一些数据存储到了本地的json文件中,但是获取时报了404的错误,找不到该文件。

页面报错如下:
在这里插入图片描述

控制台中报错如下:
在这里插入图片描述
请求方式:

const ret = await this.$axios.get("/info.json");

问题分析与解决

首先,不应该直接用get请求json文件,因为$axios重定义过会给每个请求添加统一的/api路径,所以应该改为

const ret = await this.$axios({method: 'get',url: '/info.json',baseURL:''
})

这样就不会将统一的/api添加在请求路径前面。
其实这个路径已经可以满足子应用单独运行时,请求到本地文件夹中的json文件了。

然而,这样访问在微前端框架中依旧控制台会报错如下:
在这里插入图片描述
是因为这样访问的其实是主应用本地的json文件,而我们想要访问的json文件是存储在子应用的本地的,所以应该有一个路由可以让主应用的proxy判断出这是属于自应用的请求,而转发给子应用,所以,请求应该改为

const ret = await this.$axios({method: 'get',url: '/info.json',baseURL:'/app-child' 
})

其中/app-child这个头是属于这个字应用特有的路由头,主应用的proxy中这样配置

'/app-child/': {target: 'http://127.0.0.1:10007',secure: false,logLevel: 'debug',pathRewrite: {'^/app-child': '',changeOrigin: true,},xfwd: false,
},

主应用就可以根据这个请求路径转发给子应用啦,我们也可以正常请求到json里面的内容啦~

讲的有些啰嗦,但应该也算明白,记录一下吧。

相关文章:

[qiankun+nuxt]子应用请求本地文件报错404

前言 目前公司的前端架构是qiankunnuxt做的微前端项目 问题说明 在子应用中,前端需要模拟一些数据,方便后期演示调整而不需要重新打包 所以将一些数据存储到了本地的json文件中,但是获取时报了404的错误,找不到该文件。 页面报错…...

【Qt网络编程】实现TCP协议通信

文章目录概要:本期主要讲解QT中对于TCP协议通信的实现。一、TCP协议二、Qt中TCP协议处理1.QTcpSocket2.QTcpServer三、Qt实现TCP通信1.客户端2.服务器端结尾概要:本期主要讲解QT中对于TCP协议通信的实现。 一、TCP协议 传输控制协议(TCP&am…...

Webpack打包———处理样式资源

基本使用 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles&a…...

VP记录:Codeforces Round 857 (Div. 2) A~D

传送门:CF A题 Likes: 这道题的题意很变态,十分的难懂,简直就是一坨shit,这场比赛最后被骂是有原因的 简单来说就是对于一个项目,每一个人都能对此加一或者减一,最后问你这个项目每一时刻最大和最小是多少.题目中只说明了只能点赞后才能取消,并没有解释存在取消操作必存在点…...

Docker常用项目实战演练

docker镜像源的修改 linux环境下编辑 /etc/docker/daemon.json vi /etc/docker/daemon.json #如添加如下网易镜像源 { "registry-mirrors": ["http://hub-mirror.c.163.com"] }docker run命令详细解释 日常工作中用的比较多的是docker run命令&#xff…...

Linux进程间通信-FIFO命名管道

Linux进程间通信-FIFO命名管道 1、概述 管道因为没有名称,所以只用于进程间的亲缘通信。为了克服这一缺点,提出了命名管道(FIFO),又称命名管道、FIFO文件。 FIFO不同于无名管道,它提供与之关联的路径名,该路径名以FIF…...

【Kafka】记录一次基于connect-mirror-maker做的Kafka集群迁移完整过程

文章目录背景环境工具选型实操MM1MM2以MM2集群运行以Standalone模式运行验证附录MM2配置表其他背景 一个测试环境的kafka集群,Topic有360,Partition有2000,部署在虚拟机上,由于多方面原因,要求迁移至k8s容器内&#x…...

实现VOC数据集与COCO数据集格式转换

实现VOC数据集与COCO数据集格式转换2、将voc数据集的xml转化为coco数据集的json格式2、COCO格式的json文件转化为VOC格式的xml文件3、将 txt 文件转换为 Pascal VOC 的 XML 格式<annotation><folder>文件夹目录</folder><filename>图片名.jpg</file…...

常用的密码算法有哪些?

我们将密码算法分为两大类。 对称密码&#xff08;密钥密码&#xff09;——算法只有一个密钥。如果多个参与者都知道该密钥&#xff0c;该密钥 也称为共享密钥。非对称密码&#xff08;公钥密码&#xff09;——参与者对密钥的可见性是非对称的。例如&#xff0c;一些参与者仅…...

SNS (Simple Notification Service)简介

SNS (Simple Notification Service) 是一种完全托管的发布/订阅消息收发和移动通知服务&#xff0c;用于协调向订阅终端节点和客户端的消息分发。 和SQS (Simple Queue Service)一样&#xff0c;SNS也可以轻松分离和扩展微服务&#xff0c;分布式系统和无服务应用程序&#xf…...

JVM初步理解浅析

一、JVM的位置 JVM的位置 JVM在操作系统的上一层&#xff0c;是运行在操作系统上的。JRE是运行环境&#xff0c;而JVM是包含在JRE中 二、JVM体系结构 垃圾回收主要在方法区和堆&#xff0c;所以”JVM调优“大部分也是发生在方法区和堆中 可以说调优就是发生在堆中&#xf…...

【巨人的肩膀】MySQL面试总结(一)

&#x1f4aa; 目录&#x1f4aa;1、什么是ER图2、数据库范式了解吗3、超键、候选键、主键、外键分别是什么&#xff1f;4、为什么不推荐使用外键与级联5、什么是存储过程6、drop、delete与truncate区别7、数据库设计通常分为那几步8、什么是关系型数据库9、什么是SQL10、MySQL…...

【数据结构之树】——什么是树,树的特点,树的相关概念和表示方法以及在实际的应用。

文章目录一、1.树是什么&#xff1f;2.树的特点二、树的相关概念三、树的表示方法1.常规方法表示树2.使用左孩子右兄弟表示法3. 使用顺序表来存储父亲节点的下标三、树在实际的应用总结一、1.树是什么&#xff1f; 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n&…...

JavaScript语法

文章目录一、JavaScript是什么&#xff1f;JavaScript引入方式二、基础语法书写语法输出语句变量数据类型运算符流程控制语句数组函数JS变量作用域对象一、JavaScript是什么&#xff1f; JavaScript&#xff1a;是一门跨平台的脚本语言&#xff0c;用来控制网页行为&#xff0…...

【BIOS/UEFI】HII 基本框架及概述

HII&#xff08;Human Interface Infrastructure &#xff09;定义了一套管理用户输入的基础框架。HII数据库主要提供用户安装、卸载以及使用各种字符串、字体和图片等资源的接口。 HID Devices 是用户输入设备&#xff0c;如键盘、串口和网络&#xff1b;Display Devices 是输…...

sprintf(...)溢出边界导致程序崩溃的问题

文章目录小结问题及解决参考小结 使用sprintf(...)进行格式化是一种标准的做法&#xff0c;但是这样做是有一个极大的风险&#xff0c;由于sprintf(...)不进行边界检查&#xff0c;这样会有写操作溢出边界的风险&#xff0c;并导致程序崩溃。本文进行了简单写操作溢出边界的测…...

公式推导+dfs简版

写在前面的话&#xff1a;心可以冷&#xff0c;但手不能停 第一题&#xff1a;C. Flexible String 题目大意&#xff1a;给一个aaa字符串和bbb字符串和数字kkk&#xff0c;首先设置一个计数器cntcntcnt,其中可以对aaa字符串做以下操作&#xff1a;替换aaa中的一个字母xxx&#…...

论文笔记 | 标准误聚类问题

关于标准误的选择&#xff0c;如是否选择稳健性标准误、是否采取聚类标准误。之前一直是困惑的&#xff0c;惯用的做法是类似主题的文献做法。所以这一次&#xff0c;借计量经济学课程之故&#xff0c;较深入学习了标准误的选择问题。 在开始之前推荐一个知乎博主。他阅读了很…...

银行管理系统--课后程序(Python程序开发案例教程-黑马程序员编著-第7章-课后作业)

实例1&#xff1a;银行管理系统 从早期的钱庄到现如今的银行&#xff0c;金融行业在不断地变革&#xff1b;随着科技的发展、计算机的普及&#xff0c;计算机技术在金融行业得到了广泛的应用。银行管理系统是一个集开户、查询、取款、存款、转账、锁定、解锁、退出等一系列的功…...

【18】组合逻辑 - VL18 实现3-8译码器①

VL18 实现3-8译码器① 1 题目 【这题我的思路非常绝境】奈斯 !! 看真值表的思路:Yi所在列【0仅一个其余全1】,故【以0为对象求解】 观察发现:E3 E2_n E1_n = 100 时 是 译码的使能信号 ; 并且E3 E2_n E1_n为其他值时,都不使能译码 然后就很简单,没有仿真就成功了 2 代…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...