——总问:何为跨域和代理?

🔹什么叫跨域?

前端在浏览器里发请求时,如果 域名 / 协议 / 端口 三个中有一个不一样,就会触发 跨域问题

例子:

  • 页面跑在 http://localhost:5173
  • 你要请求接口 http://100.100.1.60:29083/api/xxx

因为 端口号不一样(5173 ≠ 29083),所以就跨域了。
浏览器出于 安全机制(同源策略),会拦截掉不合法的请求,报 CORS 错误。


🔹什么叫代理?

代理(proxy)就是在前端本地开发环境下,给你“搭个中转站”。

比如 vite / vue-cli 里,可以这样写:

// vite.config.js
export default defineConfig({server: {proxy: {'/api': {target: 'http://100.100.1.60:29083', // 真实后端地址changeOrigin: true, // 修改请求头的来源rewrite: (path) => path.replace(/^\/api/, '') // 去掉/api前缀(可选)}}}
})

这样你前端调用:

fetch('/api/system/hospital/list')

浏览器看到 /api 觉得是本地的,不会跨域。
Vite 开发服务器帮你偷偷转发到:

http://100.100.1.60:29083/system/hospital/list

所以 代理的本质就是前端开发服务器代你转发请求,骗过浏览器,绕开跨域。


🔹其他结论:
在这里插入图片描述


—— 写法:

1.配置

配置写在 manifest.json 的源码视图 里面

  • 什么是 manifest.json
    在 Uni-App 项目里,manifest.json 就是一个 全局配置清单,决定了你项目在不同端(H5、小程序、App)的打包、运行、权限、启动页等核心信息。

🔹因为 不同端(H5、App、小程序)有各自的差异化设置,官方就统一放在 manifest.json 里:
1.App打包:图标、启动页、签名、权限(camera、storage、gps)等
2.小程序:appid、是否校验 URL、分包配置
3.H5:路由模式(hash/history)、发布路径
4.公共信息:应用名称、版本号、appid

👉 所以如果你需要:
1.配置 App 权限(比如用到相机、麦克风)
2.配置 小程序 appid
3.配置 打包图标、启动页
4.配置 H5 发布路径
🔹这些都要写在 manifest.json 的源码视图里。

  • 为什么不写在request里:
    在这里插入图片描述
  • 为什么写在 manifest.json
    在这里插入图片描述

🔹如图:

在这里插入图片描述

在这里插入图片描述

	/* H5端配置 */"h5": {"devServer": {"proxy": {"/api": {"target": "http://100.100.1.60:29083", // 👉 你的后端地址"changeOrigin": true,"secure": false,"pathRewrite": {"^/api": "" // 去掉前缀 /api}}}}},

🔑 secure 的意思:
1.secure: true(默认) → 代理的时候 只接受有效 HTTPS 证书
2.secure: false → 即使后端用的是 自签名证书 / 无效证书,也允许代理过去
👉 一般 本地开发环境 或者 测试服务器用自签名证书 时会写 false,不然代理会报错。
👉 如果你们后端是 http://,写不写 secure:false都无所谓,因为只在 https:// 后端生效。

2. 区分使用

🔹request: 区分使用 h5小程序

// utils/request.js// 后端服务地址(App 和小程序直连时用)
const BASE_URL = 'http://127.0.0.1:8080'// 统一请求封装
export default function request(options = {}) {let url = options.url// 判断环境// H5:支持 devServer 代理,直接走 /api// 非 H5(App、小程序):拼接完整 BASE_URL// #ifdef H5if (!url.startsWith('/api')) {url = '/api' + url}// #endif// #ifndef H5if (!url.startsWith('http')) {url = BASE_URL + url}// #endifreturn new Promise((resolve, reject) => {uni.request({url: url,method: options.method || 'GET',data: options.data || {},header: options.header || {'Content-Type': 'application/json',},success: (res) => {if (res.statusCode === 200) {resolve(res.data)} else {reject(res)}},fail: (err) => {reject(err)},})})
}

🔹解释:

// #ifdef H5
if (!url.startsWith('/api')) {url = '/api' + url
}
// #endif

👉 只在 H5 环境生效(浏览器开发)。
因为浏览器有跨域问题,这里会强制给你的请求地址加上 /api 前缀。
这样就能配合 Vite 或 Vue CLI 的代理(/api → http://127.0.0.1:8080),解决跨域。


// #ifndef H5
if (!url.startsWith('http')) {url = BASE_URL + url
}
// #endif

👉 非 H5 环境生效(App / 小程序)。
它们没跨域问题,所以直接拼接真实的 BASE_URL。
比如:
/system/hospital/list → http://127.0.0.1:8080/system/hospital/list


🔹整体逻辑

  • 在 H5(浏览器)环境:
    请求统一走 /api,通过 代理转发到后端。
  • 在 App / 小程序环境:
    直接拼上 BASE_URL,直连后端。

这样,你在项目里调用:

request({ url: '/system/hospital/list', method: 'POST' })

在不同环境下会自动处理:

  • H5:发的是 /api/system/hospital/list(再被代理转发)
  • 小程序:发的是 http://127.0.0.1:8080/system/hospital/list

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

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

相关文章

数字签名 digital signature

文章目录1、严谨的定义2、技术原理:如何工作?第一步:发送者 - 签名过程第二步:接收者 - 签名验证过程3、C语言实现示例4、关键技术要点5、安全注意事项6、最重要的应用:TLS/SSL 与网站安全1、严谨的定义 数字签名是一…

对于STM32工程模板

工程模板文件下载链接 https://download.csdn.net/download/qq_58631644/91809234 重命名 打开这个文件夹 重命名保持一致 双击打开

使用 SmartIDE 开发长安链 Go 语言智能合约

文章目录官方文档Chrome 插件登录 SmartIDE合约调试合约编译官方文档 使用SmartIDE编写Go智能合约 Chrome 插件 https://git.chainmaker.org.cn/chainmaker/chainmaker-smartplugin/-/releases 登录 SmartIDE https://ide.chainmaker.org.cn/ 合约调试 合约编译

MEM课程之物流与供应链管理课程经典案例及分析-个人原创内容放在此保存

供应链管理课程案例 特殊时期期间,美国出现养猪户对数百万头猪实施安乐死和奶农倾倒牛奶现象。从供应链的角度分析该现象并提出应对思路。要求有分析框架和文献支撑。 供应链管理课程案例分析 从供应链角度分析特殊时期美国猪安乐死和倾倒牛奶现象 本文描述了特殊时期期间,美…

Transformer:从入门到精通

学习一个深度学习模型,我们首先需要从理论的角度理解它的构架,进而理解代码。 Transformer背景 首先我们知道,神经网络有一个巨大的家族,其中的CNN(卷积神经网络)源于视觉研究,目标是让机器自…

FOC开环控制代码解读

这段代码实现了一个开环速度控制系统,用于控制电机转速。它通过PWM控制器输出电压信号,来驱动电机转动。具体来说,它在指定目标速度下,持续通过电压信号进行控制。下面是对该代码详细流程的逐步解析: 1. 宏定义与变量初…

Ansible Playbook 调试与预演指南:从语法检查到连通性排查

1:调试 playbook 时,最该先看哪一段输出? 答:先查看ansible-navigator run的 PLAY RECAP 段落,它能一次性给出每台受管主机的 ok、changed、unreachable、failed、skipped、rescued、ignored 等计数,快速定…

深入探讨可视化技术如何实现安全监测

可视化在安全监测中的作用,远超越了“美观的图表”这一表层概念。它是将抽象、混沌的安全数据转化为直观、可理解的视觉信息的过程,其核心价值在于赋能人类直觉,大幅提升认知与决策效率,从而实现对安全态势的深度感知和快速响应。…

Scikit-learn Python机器学习 - Scikit-learn加载数据集

锋哥原创的Scikit-learn Python机器学习视频教程: 2026版 Scikit-learn Python机器学习 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 课程介绍 本课程主要讲解基于Scikit-learn的Python机器学习知识,包括机器学习概述,特征工程(数据…

如何在实际应用中选择Blaze或Apache Gluten?

Blaze 与 Apache Gluten 深入研究报告:技术实现、性能对比与选型指南 一、项目背景与技术演进 1.1 大数据处理性能瓶颈与 Native 引擎兴起 随着大数据量处理需求的不断增长,基于 JVM 的 Spark 在 CPU 密集型场景下的性能瓶颈日益凸显。从 Spark 2.4 版本…

Mysql 学习感悟 Day 1 Mysql架构

Mysql 学习感悟 Day 1简介具体流程如下:Server 层连接器查询缓存分析器优化器执行器存储引擎层更新语句是怎么执行的例子日志redo logbinlogmysql事务的二段提交Mysql官网 mysql安装教程 Navicat免费安装亲测有用 简介 大体来说,MySQL 服务端可以分为…

企业为什么需要部署数据防泄露系统?

在数字化转型的浪潮中,企业核心数据已成为商业竞争的“生命线”。然而,数据泄露事件频发,不仅可能导致巨额经济损失,更会严重损害企业信誉。据IBM《2023年数据泄露成本报告》显示,全球平均数据泄露成本已攀升至445万美…

CPU的MBR寄存器和MDR寄存器

在学习计算机组成原理,特别是学到CPU时,寄存器是必须了解的一些器件,比如说程序计数器(PC),指令寄存器(IR)等寄存器,同时,了解MDR和MBR这两个寄存器也是必要的&#xff1…

QWidget和QML模式下阻止槽调用的方法总结

目录 1.背景 2.QWidget中阻止槽函数调用的方法 2.1.临时阻塞信号发射(blockSignals()) 2.2.断开特定信号与槽的连接(disconnect()) 2.3.在槽函数内通过标志位过滤 2.4.重写信号发射函数(针对自定义信号&#xff…

序列化,应用层自定义协议

我们发的是一个结构化的数据OS内部,协议全部都是传递结构体对象。可以直接发送二进制对象吗?因为CS双方都能认识这个结构体!!!可以直接发送二进制对象,但是不建议1. 客户端和服务器说属于不同的OS,不同的结构体,在不同…

序列化和反序列的学习

一:重谈协议1 理解网络协议,可以把它想象成网络世界里的“交通规则”和“通用语言”。它是一套预先定义好的规则、标准和约定,使得不同设备、不同系统之间能够顺利地进行通信和数据交换。我们从TCP协议上面理解一下,首先TCP服务是…

计算机毕业设计 java 在线学习系统 基于 Java 的在线教育平台 Java 开发的学习管理系统

计算机毕业设计 java 在线学习系统fk01a40i (配套有源码 程序 mysql数据库 论文)本套源码可以先看具体功能演示视频领取,文末有联xi 可分享传统学习模式受时空限制,互动性不足,难以满足个性化学习需求。为打破限制&…

淘宝利用商品关键词获取商品信息指南

一、核心API接口选择接口名称功能描述适用场景taobao.items.search通过关键词搜索商品,支持分页、排序,返回商品列表(含标题、价格、销量、图片等)普通商品搜索、竞品监控、数据分析taobao.tbk.item.get淘宝客API,返回…

红黑树下探玄机:C++ setmultiset 的幕后之旅

目录 一、关联式容器 二、键值对 三、set 四、set的构造 五、set的iterator 六、set的Operations 七、multiset 一、关联式容器 序列式容器 : 在初阶阶段,我们已经接触过STL中的部分容器,比如:vector、list、deque、forwa…

Spring : 事务管理

1. 基本概念 事务(Transaction)是一组不可分割的操作单元,这些操作要么全部成功执行,要么全部失败回滚,不存在部分成功的情况。 事务具有ACID特性: 原子性(Atomicity):事…