UniApp的Vue3版本中H5配置代理的最佳方法

UniApp的Vue3版本中H5项目在本地开发时需要配置跨域请求调试

最开始在 manifest.json中配置

在这里插入图片描述
总是报404,无法通过代理请求远程的接口并返回404错误。

经过验证在项目根目录创建 vite.config.js文件

在这里插入图片描述

vite.config.js内容:

// vite.config.js
import {
  defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni' //官方内置的,不用下载,下面代码粘贴直接用即可
 
export default defineConfig({
  plugins: [
    uni()
  ],
  server: {
    //port: 8300,//端口号
    proxy: {
      '/api': {
        target: 'http://xxxx.xxxx.com', // 目标服务  
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      }
    }
  }
})

再次访问应正常了,

切记:以上配置完成后记得重启一下hbuilderx和浏览器,重新编译,才不会再报404错误!

把配置过程做下记载,避免下次再次踩坑。

uniapp VUE3跨域代理后请求报404

踩坑看过来

uniapp VUE2的不用看这个

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android OpenGL ES详解——实例化

目录 一、实例化 1、背景 2、概念 实例化、实例数量 gl_InstanceID 应用举例 二、实例化数组 1、概念 2、应用举例 三、应用举例——小行星带 1、不使用实例化 2、使用实例化 四、总结 一、实例化 1、背景 假如你有一个有许多模型的场景,而这些模型的…

2024数维杯问题C:脉冲星定时噪声推断和大气时间信号的时间延迟推断的建模完整思路 模型 代码结果

(Modeling of pulsar timing noise deduction and atmospheric time delay deduction of time signals) 脉冲星是一种连续而稳定的快速旋转的中子星,为它们赢得了“宇宙的李温室”的绰号。脉冲星的空间观测对深空航天器的导航和时间标准的维…

Shell基础2

声明! 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团…

基于微信小程序的校园超市购物系统设计与实现,LW+源码+讲解

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本超市购物系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&a…

【golang-技巧】-线上死锁问题排查-by pprof

1.背景 由于目前项目使用 cgo golang 本地不能debug, 发生死锁问题,程序运行和期待不一致,通过日志排查可以大概率找到 阻塞范围,但是不能找到具体问题在哪里,同时服务器 通过k8s daemonset 部署没有更好的方式暴露端口 获取ppr…

【Visual Studio】设置文件目录

打开属性 输出目录:$(SolutionDir)bin\$(Platform)\$(Cinfiguration)\ 中间目录:$(SolutionDir)bin\intermediates\$(Platform)\$(Cinfiguration)\

智谱AI清影升级:引领AI视频进入音效新时代

前几天智谱推出了新清影,该版本支持4k、60帧超高清画质、任意尺寸,并且自带音效的10秒视频,让ai生视频告别了"哑巴时代"。 智谱AI视频腾空出世,可灵遭遇强劲挑战!究竟谁是行业翘楚?(附测评案例)之前智谱出世那时体验了一…

Datawhale模型压缩技术Task2之模型剪枝

模型剪枝 模型剪枝介绍何为剪枝(What is Pruning?)剪枝类型非结构化剪枝结构化剪枝半结构化剪枝 剪枝范围局部剪枝全局剪枝 剪枝粒度细粒度剪枝基于模式的剪枝向量级剪枝内核级剪枝通道级剪枝 为何剪枝(Why Pruning?)剪枝标准&a…

雨晨 Fix 24H2 Windows 11 iot 企业版 ltsc 2024 极简 2合1 26100.2448

映像的详细信息: 雨晨 Fix 24H2 Windows 11 iot 企业版 ltsc 2024 极简 2合1 26100.2448 索引: 1 名称: Windows 11 IoT 企业版 LTSC 2024 极简V1 26100.2448 (传统legacy资源管理器) 描述: Windows 11 IoT 企业版 LTSC 2024 极简V1 26100.2448 By YCDISM v2025 2024-11-15 大…

【Qt聊天室】客户端实现总结

目录 1. 项目概述 2. 功能实现 2.1 主窗口设计 2.2 功能性窗口 2.3 主界面功能实现 2.4 聊天界面功能实现 2.5 个人信息功能开发 2.6 用户信息界面设置功能 2.7 单聊与群聊 2.8 登录窗口 2.9 消息功能 3. 核心设计逻辑 3.1 核心类 3.2 前后端交互与DataCenter 4…

3、.Net UI库:CSharpSkin - 开源项目研究文章

CSharpSkin(C# 皮肤)是一个基于C#语言开发的UI框架,它允许开发者使用C#和.NET技术栈来创建跨平台的桌面应用程序。CSharpSkin框架通常用于实现具有自定义外观和感觉的应用程序界面,它提供了一套丰富的控件和组件,以及灵活的样式和布局系统。 …

JUC包中常用类解析

目录 (一)Callable接口 (1)Callable与Runnable的区别 (2)Future接口 2.1Futrue接口中的方法 2.2FutureTask类 (3)Callable接口的使用 3.1借助FutureTask运行 3.2借助线程池运…

交友问题 | 动态规划

描述 如果有n个人&#xff0c;每个人都可以保持单身或与其他人结成一对。每个人只能找一个对象。求总共有多少种保持单身或结对的方式。用动态规划求解。 输入 输入第一行t表示测试用例的数量 对于每一个测试用例, 输入一个整数n表示人数1<n<18 输出 针对每个测试用…

【WPF】Prism库学习(一)

Prism介绍 1. Prism框架概述&#xff1a; Prism是一个用于构建松耦合、可维护和可测试的XAML应用程序的框架。它支持WPF、.NET MAUI、Uno Platform和Xamarin Forms等多个平台。对于每个平台&#xff0c;Prism都有单独的发布版本&#xff0c;并且它们在不同的时间线上独立开发。…

基于Java Springboot在线音乐试听交流网站

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据库&#xff…

# 第20章 Cortex-M4-触摸屏

第20章 Cortex-M4-触摸屏 20.1 触摸屏概述 20.1.1 常见的触摸屏分类 电阻式触摸屏、电容式触摸屏、红外式触摸屏、表面声波触摸屏 市场上用的最多的是电阻式触摸屏与电容式触摸屏。红外管式触摸屏多用于投影仪配套设备。 电阻式触摸屏构成&#xff1a;整个屏由均匀电阻构成…

《 C++ 修炼全景指南:二十 》不止是链表升级!跳表的核心原理与超强性能解析

摘要 这篇博客全面解析了跳表 (Skip List) 作为一种高效的链表数据结构的特性和应用。跳表以多层链表和随机化策略实现 O(log n) 的查找、插入和删除性能&#xff0c;简化了平衡树结构中常见的复杂旋转操作。通过剖析跳表的结构设计和核心操作&#xff0c;我们探讨了其在范围查…

【C++之STL】摸清 string 的模拟实现(上)

文章目录 1. 为什么要模拟实现&#xff1f;2. 基本框架搭建3. 构造函数3. 1 默认构造/from c_str3. 2 拷贝构造3. 2. 1 深浅拷贝 3. 3 fill3. 4 迭代器区间构造 4. 容量操作4. 1 size()和capacity()和empty()4. 2 clear()4. 3 resize()4. 4 reserve() 1. 为什么要模拟实现&…

【postman】怎么通过curl看请求报什么错

获取现成的curl方式&#xff1a; 1&#xff0c;拿别人给的curl 2&#xff0c;手机app界面通过charles抓包&#xff0c;点击接口复制curl 3&#xff0c;浏览器界面-开发者工具-选中接口复制curl 拿到curl之后打开postman&#xff0c;点击import&#xff0c;粘贴curl点击send&am…

【网页设计】CSS 高级技巧

目标 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式能够说出常见的布局技巧 1. 精灵图 为什么需要精灵图&#xff1f;精灵图的使用精灵图课堂案例 1.1 为什么需要精灵图&#xff1f; 一个网页中往往会应用很多小的背景图像作为修饰&…