宝塔部署Vue项目解决跨域问题

news2024/11/15 15:28:38

一、前言

使用宝塔面板部署前端后端项目相比用命令行进行部署要简单许多,宝塔的可视化操作对那些对Linux不熟悉的人很友好。使用宝塔部署SpringBoot后端项目和Vue前端项目的方法如下:
1、视频教程
2、文字教程1
3、文字教程2
以上的教程完全可以按照步骤一步一步进行部署,但是部署过程中,会遇到很多问题,例如前端的跨域问题,本文在遇到上述问题并解决后,特此记录一下。

二、解决跨域

我的前端项目的反向代理配置代码如下:
在这里插入图片描述
可以看到用到了三个后端的api,按照以下步骤配置三次即可
首先打开站点的反向代理
在这里插入图片描述
添加反向代理
在这里插入图片描述
填写以下数据
三个后端api的代理目录要区分,代理目录要和Vue项目配置的反向代理的rewrite一致
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意:代理目录一定要左右都有 “/”,不然可能会出现以下错误

The request was rejected because the URL contained a potentially malicious String “//“

在这里插入图片描述
如果加上会出现以上报错,可以试着删去右边的\
\api\ => \api
添加完以上配置就完成了跨域,前端就会正常进行请求了

如果配置时,出现以下错误:

伪静态/nginx主配置/vhost/文件已经存在全局反向代理

在这里插入图片描述
出现这种情况是因为网站开启了伪静态

可以先去伪静态把伪静态清空后保存,再去设置反向代理,反向代理设置好以后再去开启伪静态。

流程:关闭伪静态 =》开启反向代理 =》 再次开启伪静态

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

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

相关文章

以太网交换机工作原理学习笔记

在网络中传输数据时需要遵循一些标准,以太网协议定义了数据帧在以太网上的传输标准,了解以太网协议是充分理解数据链路层通信的基础。以太网交换机是实现数据链路层通信的主要设备,了解以太网交换机的工作原理也是十分必要的。 1、以太网协议…

SQLException: No Suitable Driver Found - 完美解决方法详解

🚨 SQLException: No Suitable Driver Found - 完美解决方法详解 🚨 **🚨 SQLException: No Suitable Driver Found - 完美解决方法详解 🚨****摘要 📝****引言 🎯****正文 📚****1. 问题概述 ❗…

网络层 VII(IP多播、移动IP)【★★★★★★】

一、IP 多播 1. 多播的概念 多播是让源主机一次发送的单个分组可以抵达用一个组地址标识的若干目的主机,即一对多的通信。在互联网上进行的多播,称为 IP 多播(multicast , 以前曾译为组播)。 与单播相比,在一对多的…

【go】内存分配模型

内存是怎么分配给对象的? 内存分配优化的地方是? 讲讲golang内存分配模型? ans: 1.按照对象的大小分配:先算出对象的大小如果是tiny对象,就从tiny block中获取地址和偏移量,将对象打包到mcache;如果是16B以…

Xilinx系FPGA学习笔记(五)ROM的IP核学习

系列文章目录 文章目录 系列文章目录前言ROM IP分布式ROM生成ROM配置创建COE文件 块ROM生成如何快速生成Example Design 两种ROM对比 前言 最近在学习小梅哥的xilinx型FPGA开发板,一边学习一边记录,简化整理一下笔记 ROM IP 在 Memories &Storage …

JVM、JRE和 JDK:理解Java开发的三大核心组件

Java是一门跨平台的编程语言,它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中,JVM(Java虚拟机)、JRE(Java运行时环境)和JDK(Java开发工具包)是三个至关重要的核心…

致远个性化之--获取明细表中相同类型的数据汇总,并赋值对应明细行中

需求 由于在近期的项目中,有预算、费用管控等需求,而且在报销填报时,费用明细项可能会有重复相同的费用类型发生多项,而相同的费用类型是多项时,要求按照汇总后的费用管控。 具体示例图如下: 邮寄费发生了两…

有希带你深入理解指针(4)

目录 前言🥰1.回调函数😺1.1回调函数的概念😋 2.qsort使用🤯2.1什么是qsort👻2.2 qsort函数的使用🧐 3.模拟实现qsort😎 前言🥰 本篇文章是对指针知识的进一步讲解,如果…

无人机飞手执照:模拟训练技术详解

随着无人机技术的飞速发展,其在航拍、农业、物流、救援等多个领域的应用日益广泛,对无人机飞手的技能与安全意识要求也随之提高。为了确保无人机操作的安全性与效率,获取无人机飞手执照成为专业从业者不可或缺的步骤。模拟训练作为执照考取过…

第一个搭建SpringBoot项目(连接mysql)

首先新建项目找到Spring Initializr 我使用的URL是https://start.spring.io这里最低的JDK版本是17,而且当网速不好的时候可能会显示超时,这里可以选用阿里云的镜像https://start.aliyun.com可以更快一些但是里面还是有一些区别的 我们这里选择Java语言&a…

【OpenCV3】图像的翻转、图像的旋转、仿射变换之图像平移、仿射变换之获取变换矩阵、透视变换

1 图像的放大与缩小 2 图像的翻转 3 图像的旋转 4 仿射变换之图像平移 5 仿射变换之获取变换矩阵 6 透视变换 1 图像的放大与缩小 resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) src: 要缩放的图片dsize: 缩放之后的图片大小, 元组和列表表示均可.dst: 可选参数, 缩…

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2) 在文章(1)的基础上,尝试用大模型扣除图中的某些主要景物。 1、首先,安装插件: pip i…

Qt项目使用Inno Setup打包(关于打包中文乱码的解决)

​ 关于打包好的文件乱码解决方法 打包好的文件中文乱码,就是编码格式出现了问题,更改一下中文脚本编码格式,在官网Inno Setup Translations下载好中文脚本 点击下载,然后另存为 得到ChineseSimplified.isl.txt文件后&#…

使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割

代码:lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation

贷款利率高低跟什么有关?仅凭身份证就能贷到款?额度是多少?

在金融的广阔舞台上&#xff0c;借款人的“信用基石”——即其综合资质&#xff0c;是决定贷款利率高低的决定性因素。这并非偶然&#xff0c;而是银行基于详尽的风险评估与收益预期所做出的精准判断。 需明确的是&#xff0c;贷款的易得性并不意味着无门槛的放任。它更像是设置…

【动手学深度学习】04 数据操作 + 数据预处理(个人向笔记)

数据操作 N维数组是机器学习和神经网络的主要数据结构其中 2-d 矩阵中每一行表示每一行表示一个样本 当维度来到三维的时候则可以表示成一张图片&#xff0c;再加一维就可以变成多张图片&#xff0c;再加一维则可以变成一个视频 访问元素 冒号表示从冒号左边的元素到冒号右…

巨魔商店2安装教程,支持最新iOS 17.0的所有型号

支持iOS15.0到16.6.1、16.7 RC (20H18)和17.0的所有iPhone/iPad。 工具下载地址&#xff1a; https://wwi.lanzoup.com/b0knd3q5g 密码:czhi Windows安装教程&#xff1a; 1&#xff0c;电脑必须安装ITunes&#xff0c;关闭查找我的 iPhone&#xff0c;手机上必须要有提示&…

python imshow报错怎么解决

实例如下所示&#xff1a; import matplotlib.pyplot as plt plt.imshow(img) #控制台打印出图像对象的信息&#xff0c;而图像没有显示 解决方法&#xff1a; #引入pylab解决 import matplotlib.pyplot as plt import pylab plt.imshow(img) pylab.show()

MES管理系统助力企业车间管理可视化

MES管理系统作为连接计划层与现场自动化系统的桥梁&#xff0c;在助力企业车间管理可视化方面发挥着重要作用。以下是MES管理系统如何助力企业车间管理可视化的详细阐述&#xff1a; 一、MES管理系统的概述 MES&#xff08;制造执行系统&#xff09;是一种用于生产车间的实时信…

点云数据常见的坐标系有哪些,如何进行转换?

文章目录 一、点云坐标系分类1. 世界坐标系2. 相机坐标系3. 极坐标系4. 笛卡尔坐标系(直角坐标系):5. 传感器坐标系6. 地理坐标系二、坐标系转换方法1. 地理坐标系与投影坐标系之间的转换2. 投影坐标系与局部坐标系之间的转换3. 局部坐标系与3D模型坐标系之间的转换4. 相机坐…