vue2-请求代理,动态target

当你在 Vue 2 项目中将 axiosbaseURL 配置为 http://192.168.11.111:8762 时,所有请求都被认为是绝对路径请求,这种请求会直接发送到目标服务器,

跳过开发服务器的代理。 baseURL具体值

这就是为什么代理配置无法拦截 /exportPdf 的原因。


解决方案

1. 移除 baseURL,改为相对路径

axiosbaseURL 改为相对路径,使得请求能够被 proxy 正常拦截:

axios.defaults.baseURL = '/'; // 使用相对路径

请求示例

axios.get('/exportPdf/somePath'); // 相对路径请求

此时,开发服务器的代理配置会生效,将请求转发到 http://192.168.11.111:8762


2. 针对开发和生产环境动态设置 baseURL

为了兼容开发环境的代理和生产环境的真实 API 地址,可以使用环境变量动态配置 axiosbaseURL

环境变量配置
  • .env.development

    VUE_APP_BASE_API=/exportPdf
    
  • .env.production

    VUE_APP_BASE_API=http://192.168.11.111:8762/exportPdf
    

vue-config.js 代理只能是本地

https://v4.webpack.docschina.org/configuration/dev-server/#devserver

https://v4.webpack.docschina.org/configuration/dev-server/#devserver

检查 Webpack 或 Vite 配置:

如果你在使用 Webpack 或 Vite 等构建工具,确保它们被正确配置以支持 ES6 模块。对于 Vue CLI 项目,通常 vue.config.js 应该使用 CommonJS 语法,因为它是被 Node.js 直接执行的

在 Node.js 中,默认情况下,只有以.mjs结尾的文件或者在 package.json 文件中设置了"type": "module"的项目才被视为 ES 模块

  devServer: {proxy: {'/exportPdf': {target: 'http://default-service', // 默认目标changeOrigin: true,// Re-target option.target for specific requests.router: (req) => {console.log('Proxy req:', req.query);const query = req.queryconst serviceName = query.serviceName;console.log('Proxy serviceName:', serviceName);if (!serviceName) {console.log('Proxy serviceName:', serviceName);// throw new Error('The "serviceName" query parameter is required');}return `http://${serviceName}`;},// onProxyReq: (proxyReq, req, res) => {//   console.log(`Proxying request: ${req.url}`);// },}}},

构建后bug

线上需要ngxin再做个代理

https://cloud.tencent.com/developer/article/1418457

在这里插入图片描述

在这里插入图片描述

Axios GET 请求

你可以通过配置对象的形式来组织请求的参数和选项。这种方式可以让你更清晰地定义请求的各个方面,如 URL、查询参数、头部信息等。

添加头部信息和其他配置

你可以在配置对象中添加更多的属性来定制请求,比如设置自定义头部信息、超时时间、认证信息等:

const config = {url: '/api/secure-data',method: 'get',headers: {'Authorization': 'Bearer your-token-here'},timeout: 5000, // 设置超时时间为5秒responseType: 'json' // 指定响应的数据类型
};axios(config).then(response => {console.log('Secure Data:', response.data);}).catch(error => {console.error('Error fetching secure data:', error);});

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

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

相关文章

算法-字符串-76.最小覆盖子串

一、题目 二、思路解析 1.思路: 滑动窗口!!! 2.常用方法: 无 3.核心逻辑: 1.特殊情况:s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…

【Unity技巧】如何设置屏幕最小宽度

在 Unity 中,设置屏幕最小宽度可以通过调整 Canvas 的 CanvasScaler 组件来控制 UI 元素的缩放,并确保 UI 在不同屏幕宽度下始终能保持适当的布局。 不过,如果你想要限制游戏的实际窗口宽度,通常是通过代码来实现的。例如&#x…

基于softmax回归的多分类

基于softmax回归的多分类任务是机器学习领域中的一种常见应用。softmax回归,又称多项逻辑回归或多类逻辑回归,是逻辑回归在多分类问题上的推广。以下是对基于softmax回归的多分类任务的详细解释: 一、softmax回归的原理 softmax回归的核心思想是通过softmax函数将输入数据…

BatchNorm 与 LayerNorm

文章目录 1. BatchNorm批量归一化2. LayerNorm层归一化3. BatchNorm 和 LayerNorm 对比4. BatchNorm 和 LayerNorm 怎么选择References 今天重看Transformer,发现里面提到了BatchNorm和LayerNorm两种归一化方法,在这儿做一下总结和整理。 1. BatchNorm批…

《机器学习》2.4假设检验 t分布 F分布

目录 t发布 注意是这个东西服从t分布 数据服从t分布通常是在以下情况下: 以下是一些具体的例子,说明在何种情况下数据会服从t分布: t检验 交叉验证t检验 样本方差​编辑 F分布(fisher Friedman检验是一种非参数统计方法&a…

java aspose word 模板根据数据导出pdf

支持以功能&#xff1a; 1、字符串占位符替换。 2、占位符循环替换。 3、图片替换。 4、基础图标&#xff0c;折现、饼图、柱状图。 本案例运行环境&#xff1a; 1、aspose word21.1版本。 2、jdk 18。 话不多说直接上代码。 <!-- 图表相关 --><dependency><gro…

Go 语言结构

Go 语言结构 Go 语言,也称为 Golang,是一种由 Google 开发和支持的静态类型、编译型编程语言。它于 2009 年首次发布,旨在提高多核处理器、网络资源和大型代码库的性能。Go 语言以其简洁的语法、并发支持和强大的标准库而闻名,特别适合构建高性能的网络服务和分布式系统。…

安装与认识wireshark

免责声明 学习视频来自B 站 up 主泷羽 sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 Wireshark安装入门之软件…

Linux高性能服务器编程 | 读书笔记 |9.定时器

9. 定时器 网络程序需要处理定时事件&#xff0c;如定期检测一个客户连接的活动状态。服务器程序通常管理着众多定时事件&#xff0c;有效地组织这些定时事件&#xff0c;使其在预期的时间被触发且不影响服务器的主要逻辑&#xff0c;对于服务器的性能有至关重要的影响。为此&…

如何使用PHP和phpSpider搭建强大的爬虫系统

要使用PHP和phpSpider搭建一个强大的爬虫系统&#xff0c;可以按照以下步骤进行&#xff1a; 一、安装PHP环境 下载PHP&#xff1a;可以通过PHP的官方网站下载最新版本的PHP安装包。安装PHP&#xff1a;根据操作系统的不同&#xff0c;按照官方文档或安装向导进行安装。安装完…

边界层气象:脉动量预报方程展开 | 湍流脉动速度方差预报方程 | 平均湍流动能收支方程推导

写成分量形式 原始式子&#xff1a; ∂ u i ′ ∂ t u ‾ j ∂ u i ′ ∂ x j u j ′ ∂ u ‾ i ∂ x j u j ′ ∂ u i ′ ∂ x j − 1 ρ ‾ ⋅ ∂ p ′ ∂ x i g θ v ′ θ ‾ v δ i 3 f ϵ i j 3 u j ′ v ∂ 2 u i ′ ∂ x j 2 ∂ ( u i ′ u j ′ ‾ ) ∂ x j…

QT 国际化(翻译)

QT国际化&#xff08;Internationalization&#xff0c;简称I18N&#xff09;是指将一个软件应用程序的界面、文本、日期、数字等元素转化为不同的语言和文化习惯的过程。这使得软件能够在不同的国家和地区使用&#xff0c;并且可以根据用户的语言和地区提供本地化的使用体验。…

onnx graph surgeon 的使用详解

文章目录 1. onnx graph surgeon 介绍1.1 作用1.2 onnx-surgeon vs onnx.helper1.2.1 结构对比1.2.2 使用的对比1.3 graph surgeon的使用1.3.1 创建onnx1.3.2 导出子图1.3.3 替换算子2. 案例实战2.1 案例1:onnx创建2.2 案例2:onnx 创建2.3 案例3:子图的提取2.4 案例4:算子替…

3D 生成重建034-NerfDiff借助扩散模型直接生成nerf

3D 生成重建034-NerfDiff借助扩散模型直接生成nerf 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 感觉这个论文可能能shapE差不多同时期工作&#xff0c;但是shapE是生成任意种类。 本文提出了一种新颖的单图像视图合成方法NerfDiff&#xff0c;该方法利用神经辐射场 …

【CNN卷积神经网络算法】卷积神经网络

卷积神经网络整体架构 总结 输入层&#xff1a;原始数据&#xff08;图像&#xff09; 例如可以输入一张RGB图像&#xff0c;其可以标示为一个三维矩阵&#xff0c;宽W高H和通道数C3对应着RGB卷积层&#xff1a;提取局部特征&#xff0c;变换输入数据为丰富的特征图 网络使用多…

HarmonyOS Next 元服务新建到上架全流程

HarmonyOS Next 元服务新建到上架全流程 接上篇 这篇文章的主要目的是介绍元服务从新建到上家的完整流程 在AGC平台上新建一个项目 链接 一个项目可以多个应用 AGC新建一个元服务应用 新建一个本地元服务项目 如果成功在AGC平台上新建过元服务&#xff0c;那么这里会自动显…

Mac/Windows端长期破解myBase8方法(无需安装火绒)

提醒 不管哪个端&#xff0c;都需要先退出myBase。 Mac 进入用户根目录/Users/c0ny100&#xff0c;即下边是Macintosh HD > 用户 > [你的用户名]这个界面然后按ShiftCommond.&#xff0c;显示隐藏文件。找到.Mybase8.ini文件 打开.Mybase8.ini文件&#xff0c;删除Fir…

【网络安全】【Kali Linux】简单ICMP主机探测

一、参考资料 《Python安全攻防——渗透测试实战指南》&#xff0c;吴涛 等编著&#xff0c;机械工业出版社&#xff0c;2021年10月 二、探测原理 ICMP&#xff08;ping命令&#xff09; 三、脚本编写 1、导入所需的库&#xff1a; 2、扫描功能函数&#xff1a; 3、主函数…

Oracle进行exp导出密码中有特殊字符报EXP-00056和ORA-12154错处理

今天&#xff0c;业务人员反馈&#xff0c;在本地进行exp导出时报错&#xff0c;报错内容如下&#xff1a; 在Oracle密码中有特殊字符时&#xff0c;需要加引号&#xff0c;但引号怎么加呢&#xff1f;总结如下&#xff1a; 1、在windows系统中 exp 用户名/“““密码”””n…

MVC流程分析

DisaptcherServlet本质是servlet&#xff0c;执行init()方法&#xff0c;自启动底层执行代码&#xff0c; 作用&#xff1a; 1、读取springmvc配置文件&#xff0c;创建Controller对象&#xff0c;放入容器中&#xff0c;map<"id",对象> 2、接收用户请求&#…