vue脚手架配置代理请求

在 Vue 脚手架中,可以通过配置vue.config.js文件来设置代理请求,以解决跨域问题或实现其他代理需求。以下是两种常见的配置方式:

方法一:
在vue.config.js中添加如下配置:

module.exports = {devServer: {proxy: 'http://localhost:5000' // 这里填写后端服务器的地址和端口}
};

说明:
优点是配置简单,请求资源时直接发送到前端的 8080 端口即可。
缺点是不能配置多个代理,且不能灵活地控制请求是否走代理。其工作方式是优先匹配前端资源,如果请求了前端不存在的资源,那么该请求会转发给服务器。

方法二:
编写vue.config.js配置具体代理规则:

module.exports = {devServer: {proxy: {'/api1': { // 匹配所有以'/api1'开头的请求路径target: 'http://localhost:5000', // 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''} },'/api2': { // 匹配多个代理,可添加更多target: 'http://localhost:5001', changeOrigin: true,pathRewrite: {'^/api2': ''} }}}
};

上述配置中,/api1和/api2是请求前缀,可以根据实际需求进行修改。target是代理目标的基础路径,即后端服务器的地址。changeOrigin用于控制请求头中的 host 值,一般设置为true,表示代理服务器向服务器发送请求时会伪装 host 头。pathRewrite是一个对象,其中的键值对用于重写请求路径。例如,‘^/api1’: ''表示将前缀/api1替换为空字符串。

说明:

优点是可以配置多个代理,且可以灵活地控制请求是否走代理。
缺点是配置略微繁琐,请求资源时必须加上前缀。
配置完成后,重启 Vue 应用以使代理配置生效。在代码中发送请求时,需要使用配置的前缀加上具体的接口路径。例如,对于上述配置中的/api1前缀,请求接口/user/list时,实际发送的请求地址应为http://localhost:8080/api1/user/list。
请注意,这里的后端服务器地址和端口需要根据你的实际情况进行修改。如果你的后端服务器运行在不同的主机或端口上,将相应的值替换到配置中即可。此外,确保 Vue 脚手架已经正确安装并且项目能够正常运行。如果在配置过程中遇到问题,可以检查配置的准确性、服务器是否正常运行以及网络连接等方面。

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

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

相关文章

《信息与电脑(理论版)》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问:《信息与电脑(理论版)》是不是核心期刊? 答:不是,是知网收录的正规学术期刊。 问:《信息与电脑(理论版)》级别? 答:省级。主管单位:北京电子控股有限责任公司 主办…

AI安全入门-人工智能数据与模型安全

参考 人工智能数据与模型安全 from 复旦大学视觉与学习实验室 文章目录 0. 计算机安全学术知名公众号1. 概述数据安全模型安全 3. 人工智能安全基础3.1 基本概念攻击者攻击方法受害者受害数据受害模型防御者防御方法威胁模型目标数据替代数据替代模型 3.2 威胁模型3.2.1 白盒威…

实践致知第16享:设置Word中某一页横着的效果及操作

一、背景需求 小姑电话说:现在有个word文档,里面有个表格太长(如下图所示),希望这一个设置成横的,其余页还是保持竖的! 二、解决方案 1、将鼠标放置在该页的最前面闪烁,然后选择“页面”》“↘…

Python面经

文章目录 Python基本概念1. Python是**解释型**语言还是**编译型**语言2. Python是**面向对象**语言还是面向过程语言3. Python基本数据类型4.append和 extend区别5.del、pop和remove区别6. sort和sorted区别介绍一下Python 中的字符串编码is 和 的区别*arg 和**kwarg作用浅拷…

Electron 进程间通信

文章目录 渲染进程到主进程(单向)渲染进程到主进程(双向)主进程到渲染进程 (单向,可模拟双向) 渲染进程到主进程(单向) send (render 发送)on &a…

【Stable Diffusion】(基础篇三)—— 图生图基础

图生图基础 本系列笔记主要参考B站nenly同学的视频教程,传送门:B站第一套系统的AI绘画课!零基础学会Stable Diffusion,这绝对是你看过的最容易上手的AI绘画教程 | SD WebUI 保姆级攻略_哔哩哔哩_bilibili 本文主要讲解如何使用S…

客户端与服务端之间的通信连接

目录 那什么是Socket? 什么是ServerSocket? 代码展示: 代码解析: 补充: 输入流(InputStream): 输出流(OutputStream): BufferedReader 是如何提高读取效率的&a…

K8s集群初始化遇到的问题

kubectl describe pod coredns-545d6fc579-s9g5s -n kube-system 找到原因1:CoreDNS Pod 处于 Pending 状态的原因是集群中的节点都带有 node.kubernetes.io/not-ready 污点 journalctl -u kubelet -f 14:57:59.178592 3553 remote_image.go:114] "PullIma…

《简历宝典》12 - 简历中“项目经历”,内功学习 - 下篇

这一小节呢,我们继续说简历中 “项目经历” 的一些内功心法。因为项目经历比较核心,所以说完了,内功呢,我们会着重说一下 实战部分。 目录 1 所用技术的考虑 2 自我成长的突出 3 综合使用STAR法则 4 小节 1 所用技术的考虑 …

如何评估AI模型:评估指标的分类、方法及案例解析

如何评估AI模型:评估指标的分类、方法及案例解析 引言第一部分:评估指标的分类第二部分:评估指标的数学基础第三部分:评估指标的选择与应用第四部分:评估指标的局限性第五部分:案例研究第六部分&#xff1a…

pear-admin-fast项目修改为集成PostgreSQL启动

全局搜索代码中的sysdate(),修改为now() 【前者是mysql特有的,后者是postgre特有的】修改application-dev.yml中的数据库url使用DBeaver把mysql中的数据库表导出csv,再从postgre中导入csv脚本转换后出现了bpchar(xx)类型,那么一定…

用友U8存货分类按层级取数SQL语句

SELECT cInvCCode 分类编码, cInvCName 分类名称, iInvCGrade 分类层级, ss.bInvCEnd 是否是末级, aa.* FROM InventoryClass ss LEFT JOIN ( SELECT * FROM ( SELECT cInvCCode AS 一级分类编码, …

python数据可视化(6)——绘制散点图

课程学习来源:b站up:【蚂蚁学python】 【课程链接:【【数据可视化】Python数据图表可视化入门到实战】】 【课程资料链接:【链接】】 Python绘制散点图查看BMI与保险费的关系 散点图: 用两组数据构成多个坐标点,考察…

如何降低老年人患帕金森病的风险?

降低老年人患帕金森病风险的方法 避免接触有害物质:长期接触某些化学物质、农药或其他有害物质可能会增加患帕金森病的风险。应减少这些物质的暴露,例如在工作或生活中采取防护措施。 健康饮食:均衡饮食,多吃富含抗氧化剂的食物&a…

做了一个万能搜索框

最近给网页做了一个搜索框,现在搜索比以前更加方便了,下面简单介绍一下如何使用 我们进入网页版(app.zyjj.cc)点击右上角的搜索就可以看到这个新版的搜索框了 目前支持中文、拼音、首字母等多种搜索方式,大家可以随意…

【Python】Python-docx使用实例 科技档案封面批量生成

使用背景 根据excel表中的信息,按照word模板格式,每条信息生成一个对应的模板及文件名。 我这里的情况是将科技档案的封面格式按照案卷表的明细批量生成。 (单位的档案软件太鸡肋了,没有这个功能) 代码整篇 工程档…

【Linux】常见指令(下)

【Linux】常见指令(下) 通配符 *man指令cp指令echo指令cat指令(简单介绍)cp指令 mv指令alias指令which ctrl ccat指令linux下一切皆文件 more指令less指令head指令tail指令管道 通配符 ‘*’ 通配符’ *‘,是可以匹配…

4 C 语言控制流与循环结构的深入解读

目录 1 复杂表达式的计算过程 2 if-else语句 2.1 基本结构及示例 2.2 if-else if 多分支 2.3 嵌套 if-else 2.4 悬空的 else 2.5 注意事项 2.5.1 if 后面不要加分号 2.5.2 省略 else 2.5.3 省略 {} 2.5.4 注意点 3 while 循环 3.1 一般形式 3.2 流程特点 3.3 注…

Dynamic多数据源

有时候我们在项目中,可能会遇到需要同时使用多个数据库连接的情况,这个时候可以使用MyBatis-Plus的dynamic多数据源的配置。但其实MyBatis-Plus官方还提供了mybatis-mate组件,但是他是付费的企业组件。 官方文档: 多数据源支持 …

识别视频中的人数并统计出来

目的: 使用Python和pysimpleguil以及opencv写一个统计人流量的软件。要求:1 加载选定的视频 2 通过形态学特征识别人,3统计人数并且在界面上显示出来,4 保存识别出人数的信息。 步骤 1: 安装必要的库 首先,确保你已经安装了Python。然后,安装PySimpleGUI和OpenCV。你可…