vue2-请求代理,动态target

news/2024/12/16 10:42:56/

当你在 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.ppmy.cn/news/1555563.html

相关文章

商协会管理系统:沃德商协会管理系统微信小程序公众号

智慧化会员体系 在线入会、会费缴纳、到期提醒、会员管理、消息群发、线上证书、会员通讯录、有效供需匹配等。 智敏化内容运营活动接龙,问卷调查,党建新闻资讯发布,多方位满足会员内容信息运营。 智能化活动构建为商会提供多种活动营解决…

【网络】五种IO模型多路转接select/poll/epollReactor反应堆模式

主页:醋溜马桶圈-CSDN博客 专栏:计算机网络原理_醋溜马桶圈的博客-CSDN博客 gitee:mnxcc (mnxcc) - Gitee.com 目录 1.五种 IO 模型 1.1 阻塞 IO 1.2 非阻塞 IO 1.3 信号驱动 IO 1.4 IO 多路转接 1.5 异步 IO 2.高级 IO 重要概念 2.1 …

Redis缓存应用场景【Redis场景上篇】

文章目录 1.缓存基础2.缓存异步场景1.缓存穿透2.缓存击穿3.缓存雪崩总结 3.缓存一致性 1.缓存基础 Redis由于性能高效,通常可以做数据库存储的缓存。一般而言,缓存分为服务端缓存和客户端缓存。缓存有以下三种模式: Cache Aside&#xff08…

利用PHP和phpSpider实现网站搜索功能的数据采集

利用PHP和phpSpider实现网站搜索功能的数据采集,可以分为以下几个步骤: 1. 环境准备 安装PHP:确保你的开发环境中已经安装了PHP。 安装Composer:Composer是PHP的依赖管理工具,用于安装和管理PHP包。 安装phpSpider&…

conda学习

参考: Anaconda 官网教程 https://freelearning.anaconda.cloud/get-started-with-anaconda/18202conda配置虚拟环境/conda环境迁移/python环境迁移 https://blog.csdn.net/qq_43369406/article/details/127140839 环境: macOS 15.2Anaconda Navigator 2.4.2 x.1…

搜索文件中的某些字符串

下面代码实现在my_projuect中所有全部的文件以查找aaa字符串: findstr /S /M "aaa" "D:\my_project\*.*"findstr findstr 是 Windows 命令行中的一个工具,用于在文件中搜索指定的字符串。 /S 这个选项表示递归搜索,即会…

基于Dockerfile的博客管理系统的容器化部署

目录 任务描述 3 1.1课题的基本内容 3 1.2 项目整体技术架构 3 1.3主要技术栈: 3 1.4 模块划分 4 1.5 容器集群化部署的任务内容 5 1.6 项目容器化部署的目的 6总体结构 7 2.1 容器角色和功能 7 2.2 容器之间的关联关系 8 2.3 数据流动示例 8 3.详细设计 9 3.1 设计…

第三十八天|动态规划|背包问题总结,322. 零钱兑换,279.完全平方数,139.单词拆分,多重背包

目录 322. 零钱兑换 279.完全平方数 先遍历物品, 再遍历背包(好理解一点) 先遍历背包, 再遍历物品 139.单词拆分 方法1:完全背包 方法2:完全背包2 方法3:回溯法记忆化 多重背包 背包问题总结 背包递推公式 …