vue的proxy代理详解

news2025/2/27 17:05:23

一、proxy常用参数说明

module.exports = {
    publicPath: "/",
    devServer: {
        proxy: {
            "/api": {
                // 代理名称   凡是使用/api开头的地址都是用此代理
                target: "http://1.2.3.4:5000/", // 需要代理访问的api地址
                changeOrigin: true, // 允许跨域请求
                pathRewrite: {
                    // 重写路径,替换请求地址中的指定路径
                    "^/api": "/", // 将请求地址中的/api替换为空,也就是请求地址中不会包含/api/
                },
            },
        },
    },
};

二、关于/api的详解

‘/api’:是指遇到这个字符开头的话,在这个字符前面加上target里面的ip或者域名。

举例:
①登录接口:http://1.2.3.4:5000/login
…中间省略了配置过程…
②npm run serve:Local: http://localhost:8080/
③点击后发送的登录请求:http://localhost:8080/api/login
④/api 的作用就是将/api前的localhost:8080变成target的内容http://1.2.3.4:5000/
⑤完整的路径变成了http://1.2.3.4:5000/api/login
⑥实际接口当中没有这个api,所以pathwrite重写就解决这个问题的。
pathwrite识别到api开头就会把/api重写成空,那就是不存在这个/apil了,完整的路径又变成:http://1.2.3.4:5000/login
在这里插入图片描述

三、部署因为/api无法请求到数据

接口名称不用/api,改用实际接口的第一个字段,然后取消pathwrite重写

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

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

相关文章

[Node.js]如何在IDEA中配置Node.js

【目录】 一、下载Node.js 二、安装Node.js 三、配置Node.js 四、测试Node.js 一、下载Node.js 官网下载链接:Node.js 点击下图红色标注区域,即可下载msi文件 二、安装Node.js 打开msi文件 一路点击“Next”(建议自定义文件安装路径&#xf…

vue3的基本使用(超详细)

一、初识vue3 1.vue3简介 2020年9月18日,vue3发布3.0版本,代号大海贼时代来临,One Piece特点: 无需构建步骤,渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jams…

使用小程序制作一个电子木鱼,功德+1

此文主要通过小程序制作一个敲木鱼的小工具,在心烦意乱的时候缓解一下焦虑。 一、创建小程序二、设计页面三、代码块一、创建小程序 访问微信公众平台,点击账号注册。选择小程序,并在表单填写所需的各项信息进行注册。在开发管理选择开发设置,将AppID及AppSecret复制出来进…

Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法

点击vue路由跳转,控制台报错:Avoided redundant navigation to current location: “/xxxxxx“解决方法 一、描述问题 在使用this.$router.push跳转页面时候,重复点击菜单引起路由重复报错 比如当前页面显示区是路由组件‘/cats’&#xff…

关于js 中 try catch用法

try…catch语法,简单来说就是用来捕获异常的,我就简述一下我遇到的问题 当使用vuex在actions发请求时,这个接口不仅可以添加购物车数据,同时也可更新产品的数量,我就在更新产品数量的地方出现了问题, 先说说…

HTML生日快乐-生日祝福(烟花+粒子动画)

本人对前端不太了解,对网上代码进行简单修改,完成部署。 粒子动画:https://github.com/kennethcachia/shape-shifter 烟花:网上有许多相关代码,未找到原作者 效果:http://8.130.106.21/HappyBirthday/Happy…

原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)

文章目录前言一、插入背景二、头部1.导航栏2. 优化导航栏3 时间4. 搜索框三、主体四、底部五、背景泡沫球特效六、note小便签七、全部代码1. index.html2. style.css3. index.js八、总结链接:https://pan.baidu.com/s/1uaRCJXyIrY56NXabau4wjw?pwdLDL6 提取码&…

Vue3详细教程

一.Vue3的介绍 相信大家都已经学习过Vue2了,对Vue有了一定的了解。那么今天我们就一起来学习有关Vue3的知识点。那为什么要学习Vue3呢,主要是他有以下的特点。 (1)新增组合式api (2)更加接近原生 &#xf…

JavaWeb web.xml配置详解

参考: XML 教程Java web之web.xml配置详解 Javaweb三大组件是:Servlet,Filter,Listener。 1、Servlet Servlet作为中转处理的容器,连接了客户端和服务器端的信息交互和处理。2、Filter 拦截用户请求,在服…

tomcat下载安装及配置教程

之前选择的版本是tomcat 10.0按照下面流程走了一遍,发现一直是未发现(Not Found)的状态。 后来,我换成了tomcat 9版本就OK了 下面以tomcat 9.0版本为例讲述其过程 一、下载Tomcat及解压 官网: http://tomcat.apach…

Vue基础知识总结 9:vue webpack打包原理

🍅 作者简介:哪吒,CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪 🍅 哪吒多年工作总结:Java学习路线总结,搬砖工逆袭Java架构师 🍅 关注公众号【哪吒编程】&#…

解决npm warn config global `--global`, `--local` are deprecated. use `--location=global` instead.

在安装配置node时,cmd检查node没问题 但是检查npm就出现npm warn config global --global, --local are deprecated. use --locationglobal instead.的报警 问题出现在,以前版本npm的命令一般时XXX -g 但是随着版本更替,这个老方法被弃用了&a…

详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)

vite创建vue3ts项目 为何选择vite: vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动: 快速的冷启动,不需要等待打包操作; 即时的热模块更新,替换性能和模块数量的解耦让更新…

uniapp中自定义导航栏

相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦。 当然uniapp也给我们提供了很多的自定义导航栏的…

开箱即用,这些 Vue3 后台管理系统模板绝对让你爽歪歪!

原文链接:Vue3 后台管理系统模板推荐。 之前写了一篇关于 Vue2 的后台管理系统模板的推荐,详情请见 Vue后台管理系统模板推荐。 Vue3 在今年2月份已成为新的默认版本,本文收集了一些 Vue3 的后台管理系统模板,分享给在座的仌 &am…

web前端面试题(必背面试题)

必背面试题-手写题 前端面试(手写题)_Z_Xshan的博客-CSDN博客 css系列 面试官:说说你对盒子模型的理解 一、是什么 所有元素都可以有像盒子一样的平面空间和外形 一个盒子由四部分组成:context ,padding,margin,border con…

Django web开发(一) - 前端

文章目录前端开发1.快速开发网站2.标签2.1 编码2.2 title2.3 标题2.4 div和span2.5 超链接2.6 图片小结标签的嵌套2.7 列表2.8 表格2.9 input系列2.10 下拉框2.11 多行文本用户注册案例: 用户注册GET 方式POST 方式表单数据提交优化3.CSS样式3.1 快速上手3.2 CSS应用方式1. 在标…

小程序生命周期

小程序的生命周期说白了就是指程序从创建、到开始、暂停、唤起、停止、卸载的过程。 我们大概从三个角度看一下小程序的生命周期。 (1):应用生命周期 (2):页面生命周期 (3)&…

Threejs入门教程

一、本地搭建Threejs官方文档网站 1.官网地址:https://github.com/mrdoob/three.js 下载压缩包并解压或使用git clone 若github过慢,则使用gitee对应网址:three.js: mrdoob/three.js 同步库 2.目录解析 3.启动方式 在three.js项目根目录下…

Vue中created和mounted详解

目录 一、生命周期概念 二、浏览器渲染过程 三、生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段 四、使用场景 五、常见相关问题 一些页面跳转后, 一些基础数据接口没有重新请求 一、生命周期概念 通俗地讲,生命周期即Vue实例或…