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.声明一个字符数组——用于记录对应字符出现…

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…

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

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

QT 国际化(翻译)

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

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、接收用户请求&#…

fiddler设置抓取https,还抓取不到https如何解决?

一、清楚 C:\Users\Admin\AppData\Roaming\Microsoft\Crypto\RSA 目录下所有文件&#xff08;首次安装fiddler请忽略&#xff09; 二、清除电脑上的根证书&#xff0c;WINR快捷键&#xff0c;输入&#xff1a;certmgr.msc&#xff0c; 然后回车&#xff0c;查找所有fiddler证书…

【知识】总体标准差和样本标准差有什么区别

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 总体标准差和样本标准差之间的区别主要在于它们的计算方式&#xff0c;特别是在分母的选择上。这种差异是因为我们通常在实际应用中并不总是能够得到整…

.NET 9 已发布,您可以这样升级或更新

.NET 9 已经发布&#xff0c;您可能正在考虑更新您的 ASP.NET Core 应用程序。 我们将介绍更新应用程序所需的内容。从更新 Visual Studio 和下载 .NET SDK 到找出可能破坏应用程序的任何重大更改。 下载 .NET 9 SDK 这些是下载 .NET 9 SDK 所需的步骤。 更新 Visual Studi…

【Iot】前端串口serialport.js串口通信库快速入门(附经验总结)

前端串口serialport.js串口通信库快速入门(附经验总结) 一、serialport简介1.1 安装1.2 基本用法1.3 完整示例代码二、问题2.1 数据包被拆分(已解决)2.2 串口返回的多种数据,如何区分类别(待解决)公司项目需要开发一个windows客户端,提供串口modbusRTU数据读取、处理、显…

前端报错npm ERR cb() never called问题

环境使用node版本v14.21.3&#xff0c;npm版本6.14.18 1.问题描述 1.1使用npm install后报错 npm ERR! cb() never called!npm ERR! This is an error with npm itself. Please report this error at: npm ERR! ? ? <https://npm.community>npm ERR! A complete log…

【下】王树森《小红书推荐系统公开课》- 课程笔记(特征交叉、行为序列、重排/推荐系统多样性、物品冷启动、涨指标的方法)

写在前面 本文为王树森老师《小红书推荐系统公开课》的课程笔记 课程来源&#xff1a;ShusenWang的个人空间-ShusenWang个人主页-哔哩哔哩视频 (bilibili.com)课程资料&#xff1a;GitHub - wangshusen/RecommenderSystem 由于篇幅较长&#xff0c;分为【上】【下】两篇文章…

[C++]C++工具之对异常情况的处理(throw、catch、try)以及用命名空间避免同名冲突

一、C 异常处理&#x1f60a; 1.1 定义 C 中的异常处理用于应对程序运行中的异常情况&#xff08;如除零、数组越界等&#xff09;&#xff0c;通过 try-catch 机制捕获和处理错误&#xff0c;防止程序崩溃。 异常是程序运行时意外发生的事件&#xff0c;可以通过抛出&#xf…