当前位置: 首页 > 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 代…...

2020蓝桥杯真题最长递增 C语言/C++

题目描述 在数列a_1 ,a_2,⋯,a_n 中&#xff0c;如果a_i <a_i1 <a_i2<⋯<a_j&#xff0c;则称 a_i至 a_j为一段递增序列&#xff0c;长度为 j−i1。 定一个数列&#xff0c;请问数列中最长的递增序列有多长。 输入描述 输入的第一行包含一个整数 n。 第二行包含…...

华为OD机试题 - 寻找连续区间(JavaScript)| 机考必刷

更多题库,搜索引擎搜 梦想橡皮擦华为OD 👑👑👑 更多华为OD题库,搜 梦想橡皮擦 华为OD 👑👑👑 更多华为机考题库,搜 梦想橡皮擦华为OD 👑👑👑 华为OD机试题 最近更新的博客使用说明本篇题解:寻找连续区间题目输入输出示例一输入输出说明示例二输入输出Cod…...

一次疲惫的调试--累了及时透气

原创 射频清茶 深山小老虎 2023-03-11 14:32发表于广东 收录于合集 #射频调试3个 #网分4个 #Wi-Fi 2个 进来透透气 道不尽红尘舍恋 诉不完人间恩怨 世世代代都是缘 喝着相同的水 留着相同的血 这条路漫漫又长远 红花当然配绿叶 这一辈子谁来陪 渺渺茫茫来又回 往日情景再…...

综合练习7 摄氏度转华氏温度(“\t“的使用,循环语句)

综合练习7 摄氏度转华氏温度 使用do…while循环&#xff0c;在控制台输入摄氏温度与华氏温度的对照表。 对照表从摄氏温度-30℃到50℃&#xff0c;每行间隔10℃&#xff0c;运行如下&#xff1a; 摄氏温度&#xff1a;-30℃ 华氏温度&#xff1a;-22.0℉ 摄氏温度&#xff1a;…...

AWS数据库总结

RDS – 联机事务处理OLTP&#xff08;Online Transaction Processing&#xff09;&#xff0c;包括&#xff1a; SQL ServerOracleMySQL ServerPostgreSQLAuroraMariaDB非关系数据库DynamoDB数据仓库RedShift – 联机分析处理OLAP&#xff08;Online Analytics Processing&…...

2个步骤就能批量给视频添加滚动字幕

现在很多小伙伴在剪辑视频的时候都会给自己的视频添加适配的字幕&#xff0c;但是有很多的视频想要添加一样的滚动字幕时&#xff0c;有一个能批量添加剪辑的工具非常重要&#xff0c;今天小编就给大家分享一个可以批量剪辑大量视频的工具&#xff0c;下面一起看看具体的操作步…...

PHP 的运行方式有哪些?

PHP本质上的运行方式可以分为两种&#xff1a; 基于命令行的基于PHP-FPM的 但实际上&#xff0c;PHP能做的事很多&#xff0c;很多场景下&#xff0c;不同的运行方式能让开发更方便&#xff0c;减轻各种工作。 测试开发 PHP内置了一个HTTP 的server。这意味着&#xff0c;很…...

Web学习3_JavaScript

1.1 JS的调用方式与执行顺序 使用方式 HTML页面中的任意位置加上<script type"module"></script>标签即可。 常见使用方式有以下几种&#xff1a; 直接在<script type"module"></script>标签内写JS代码。script type"modu…...

「MySQL基础」不可重复读和幻读的区别

「MySQL基础」不可重复读和幻读的区别 文章参考&#xff1a; 在数据库中不可重复读和幻读到底应该怎么分&#xff1f; 作者&#xff1a;暖猫Suki、普通熊猫 文章目录「MySQL基础」不可重复读和幻读的区别一、概述二、小结一、概述 正好在琢磨这个问题&#xff0c;也被搞得头昏…...

CorelDRAW2023最新版新增功能200多个新模板

CorelDRAW是一款平面矢量绘图排版软件&#xff0c;CorelDRAW运用涵盖企业VI设计&#xff0c;广告设计&#xff0c;包装设计&#xff0c;画册设计&#xff0c;海报、招贴设计&#xff0c;UI界面设计&#xff0c;网页设计&#xff0c;书籍装帧设计&#xff0c;插画设计&#xff0…...

网站建设项目详情/国际实时新闻

1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储&#xff0c;但这两者基本上是两个极端。 数组 数组存储区间是连续的&#xff0c;占用内存严重&#xff0c;故空间复杂的很大。但数组的二分查找时间复杂度小&#xff0c;为O(1)&#xff1b;数组的特点是&…...

政府网站建设如何做/北京seo报价

a) Docker images 命令docker images : 列出本地镜像。docker images [OPTIONS] [REPOSITORY[:TAG]]-a :列出本地所有的镜像&#xff08;含中间映像层&#xff0c;默认情况下&#xff0c;过滤掉中间映像层&#xff09;&#xff1b;--digests :显示镜像的摘要信息&#xff1b;-f…...

合肥市建设工程造价信息网站/千锋教育的口碑怎么样

分类&#xff1a;Unity、C#、VS2015 创建日期&#xff1a;2016-04-21 一、简介 在桌面系统的游戏中&#xff0c;鼠标输入是最基本的输入方式之一。游戏很多操作都需要鼠标来完成&#xff0c;例如武器的瞄准和开火、菜单的单击、物体的拾取等。 鼠标输入的相关事件包括鼠标移动、…...

网站默认样式表/sem竞价培训

【实验结论】 一、Part1&#xff1a;验证性内容。 1、在循环中使用控制语句continue和break的功能区别。 &#xff08;1&#xff09;探索过程。 有下列两段代码&#xff0c;为方便对比&#xff0c;分别标号①②。 序号①②代码 #include <stdio.h> int main() {int i; fo…...

厦门谁需要网站建设/百度快照怎么打开

以下代码演示了 1000 个线程同时对 cnt 执行自增操作&#xff0c;操作结束之后它的值有可能小于 1000。 import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors;public class UnsafeExemple {publ…...

房地产网站怎么建设/上海aso优化公司

一.前言 最近在面试过程中发现自己对mvc理解程度比较浅&#xff0c;特整理一些知识点来梳理一下 二.知识点 定义 基于java实现了MVC设计模式的web框架&#xff0c;将model、view、controller分离解耦来进行日常开发 2.工作流程 用户发送请求 - > 前端控制器 DispatcherSe…...