当前位置: 首页 > news >正文

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

一、前言

使用宝塔面板部署前端后端项目相比用命令行进行部署要简单许多,宝塔的可视化操作对那些对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/文件已经存在全局反向代理

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

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

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

相关文章:

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

一、前言 使用宝塔面板部署前端后端项目相比用命令行进行部署要简单许多,宝塔的可视化操作对那些对Linux不熟悉的人很友好。使用宝塔部署SpringBoot后端项目和Vue前端项目的方法如下: 1、视频教程 2、文字教程1 3、文字教程2 以上的教程完全可以按照步骤…...

C++智能指针简述

auto_ptr 设计目的:超出作用域,自动释放内存。所有权传递:拷贝auto_ptr时,原指针失效,释放所有权;新指针获得所有权。总而言之,允许通过拷贝转移所有权,独占所有权。缺陷&#xff1…...

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以…...

Android Camera系列(二):TextureView+Camera

两岸猿声啼不住,轻舟已过万重山—李白 Android Camera系列(一):SurfaceViewCamera Android Camera系列(二):TextureViewCamera Android Camera系列(三):GLS…...

DFS算法专题(一)——二叉树中的深搜【回溯与剪枝的初步注入】

目录 1、DFS算法简介 2、算法实战应用【leetcode】 2.1 计算布尔二叉树的值 2.1.1 算法原理 2.1.2 算法代码 2.2 求根节点到叶节点数字之和 2.2.1 算法原理 ​2.2.2 算法代码 2.3 二叉树剪枝 2.3.1 算法原理 2.3.2 算法代码 2.4 验证二叉搜索树 2.4.1 算法原理 …...

AWS SES服务 Golang接入教程(排坑版)

因为刚来看的时候 也迷迷糊糊的 所以 先讲概念 再上代码 一 基础设置 这里需要完成两个最基础的设置任务 1 是验证至少一个收件电子邮箱 2 【很关键】是验证发送域。即身份里的域类型的身份。(可以理解为配置你的域名邮箱服务器(SMPT)为亚马…...

Vite + Vue3 +Vant4出现Toast is not a function

今天写前端的时候出现了这个问题搞了我一会 搜集原因: 1:是vant版本的问题,Toast()的方法是vant3版本的写法,而我用的是vant4,vant4中的写法改成了showToast()方法,改正过来 import {showToast} from "vant"; 发现还是…...

【MATLAB】模拟退火算法

模拟退火算法的MATLAB实现 模拟退火算法简介模拟退火算法应用实例关于计算结果 模拟退火算法简介 1982年,Kirkpatrick 将退火思想引入组合优化领域,提出了一种能够有效解决大规模组合优化问题的算法,尤其对 NP 完全问题表现出显著优势。模拟…...

什么是Kubernetes RBAC?

什么是Kubernetes RBAC? 1、什么是RBAC?2、核心组件3、优势💖The Begin💖点点关注,收藏不迷路💖 在Kubernetes集群中,RBAC(基于角色的访问控制)是保障系统安全的关键。它通过角色和绑定管理不同实体对资源的访问权限,具有显著优势: 1、什么是RBAC? RBAC是Kube…...

在Spring Boot中通过自定义注解、反射以及AOP(面向切面编程)

在Spring Boot中,通过自定义注解、反射以及AOP(面向切面编程)来动态修改请求参数是一种高级且强大的技术组合,它允许开发者在不修改原始方法实现的情况下,对方法的执行过程进行干预和定制。这种技术通常用于日志记录、…...

安防监控视频平台LntonAIServer视频智能分析平台新增视频质量诊断功能

随着安防行业的快速发展,视频监控系统已经成为维护公共安全和个人隐私的重要工具。然而,由于各种因素的影响,视频流的质量可能会受到影响,从而导致监控效果不佳。为了解决这一问题,LntonAIServer推出了全新的视频质量诊…...

vscode从本地安装插件

1. 打开VSCode。 2. 点击左侧菜单中的“扩展”(或按CtrlShiftX)。 3. 点击“更多操作”(三个点)> “从VSIX安装”。 4. 选择下载的.vsix文件。 5. 点击“安装”即可安装插件。...

Superset二次开发之新增复选框Checkbox筛选器

一. 背景 Superset目前支持的筛选类型:值、数值范围、时间列、时间粒度、时间范围 5种类型,显然无法满足业务需求。根据产品需要,需要支持复选框、单选框、级联选择等类型的筛选器。本文探讨复选框、单选框的技术实现方式。 二. 效果预览 三. 实现思路 复用 值 筛选器模块,…...

PromQL 语法

什么是 PromQL PromQL (Prometheus Query Language) 是 Prometheus 监控系统中用于查询时间序列数据的语言。它允许用户编写查询,以从 Prometheus 中检索并处理监控数据。 PromQL 的基础概念 1. 时间序列 Prometheus 中的时间序列由以下几个部分组成:…...

掌握Go语言中的时间与日期操作

Go语言中的时间与日期操作 在编写程序时,处理时间和日期看似是一项无关紧要的任务,但在需要同步多个任务或从文本文件中读取时间时,它的重要性便凸显出来。Go语言中的time包为我们提供了丰富的时间与日期操作功能。本文将详细介绍如何在Go语…...

4G模块、WIFI模块、NBIOT模块通过AT指令连接华为云物联网服务器(MQTT协议)

MQTT协议概述 MQTT(Message Queuing Telemetry Transport)是一种轻量级的消息传输协议,它被设计用来提供一对多的消息分发和应用之间的通讯,尤其适用于远程位置的设备和高延迟或低带宽的网络。MQTT协议基于客户端-服务器架构&…...

spring数据校验Validation

文章目录 需要的依赖创建校验对象Validator 需要的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>创建校验对象Validator 测试的实体类 //创建…...

Uniapp基于uni拦截器+Promise的请求函数封装

最近在学Uniapp&#xff0c;到封装请求的时候本来还想用axios&#xff0c;但是看到一些教学视频有更简单的方法&#xff0c; 基于uni的拦截器和Promise封装的请求函数 但是他们是用TS写的&#xff0c;还没学到TS&#xff0c;我就把JS写了&#xff0c;最终也是请求成功 // src/…...

【工具】使用 Jackson 实现优雅的 JSON 格式化输出

说明 在 Java 开发中&#xff0c;我们经常需要处理 JSON 数据。无论是从服务器端返回的数据&#xff0c;还是本地存储的数据&#xff0c;JSON 格式都因其轻量级和易于解析的特点而被广泛使用。当我们需要查看或调试 JSON 数据时&#xff0c;优雅、格式化的输出将大大提高我们的…...

ApacheKafka中的设计

文章目录 1、介绍1_Kafka&MQ场景2_Kafka 架构剖析3_分区&日志4_生产者&消费者组5_核心概念总结6_顺写&mmap7_Kafka的数据存储形式 2、Kafka的数据同步机制1_高水位&#xff08;High Watermark&#xff09;2_LEO3_高水位更新机制4_副本同步机制解析5_消息丢失问…...

OpenClaw网页前端开发与优化全流程指南

OpenClaw网页前端开发与优化全流程指南 &#x1f310; 核心价值&#xff1a;OpenClaw实现"需求→设计→代码→优化→部署"全流程自动化&#xff0c;开发效率提升600%&#xff0c;页面加载速度提升300%&#xff0c;SEO评分提升85%&#xff0c;完全兼容React/Vue/Angul…...

保姆级图解:ARM CHI协议里的Credit机制,到底是怎么防止芯片“堵车”的?

ARM CHI协议中的Credit机制&#xff1a;芯片互连的智能交通控制系统 想象一下早高峰时段的城市交通——如果没有红绿灯和匝道流量控制&#xff0c;整个道路系统将在几分钟内陷入瘫痪。类似地&#xff0c;在现代多核处理器和芯片间互连架构中&#xff0c;Credit机制正是扮演着这…...

新手必看:腾讯SRC漏洞挖掘实战全记录(附详细步骤与避坑指南)

腾讯SRC漏洞挖掘实战&#xff1a;从零到一的完整攻防手册 第一次接触漏洞挖掘时&#xff0c;我盯着电脑屏幕发呆了半小时——那些专业术语像天书一样&#xff0c;而论坛里"轻松挖洞"的帖子更让我怀疑自己是不是选错了方向。直到在腾讯SRC提交第一个有效漏洞的那天&am…...

intv_ai_mk11企业应用指南:将AI对话能力嵌入CRM系统提升客服响应效率

intv_ai_mk11企业应用指南&#xff1a;将AI对话能力嵌入CRM系统提升客服响应效率 1. 企业客服面临的挑战与AI解决方案 现代企业客服系统普遍面临三大痛点&#xff1a;响应速度慢、人力成本高、服务质量不稳定。传统CRM系统虽然能记录客户信息&#xff0c;但在实时交互环节仍需…...

开源工具Cursor Free VIP:突破AI编程限制的高效使用指南

开源工具Cursor Free VIP&#xff1a;突破AI编程限制的高效使用指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

Python 3.13.7(发布于 2025 年 8 月 14 日)在 Windows 平台上的官方下载选项列表

Python 3.13.7&#xff08;发布于 2025 年 8 月 14 日&#xff09;在 Windows 平台上的官方下载选项列表&#xff0c;包含多种架构&#xff08;x64、x86/32-bit、ARM64&#xff09;和两种分发形式&#xff1a; Windows installer&#xff1a;标准图形化安装程序&#xff08;含…...

Kandinsky-5.0-I2V-Lite-5s短视频质量控制:5秒内关键帧稳定性与抖动抑制技巧

Kandinsky-5.0-I2V-Lite-5s短视频质量控制&#xff1a;5秒内关键帧稳定性与抖动抑制技巧 1. 引言&#xff1a;为什么需要关注短视频质量 当你使用Kandinsky-5.0-I2V-Lite-5s生成短视频时&#xff0c;是否遇到过这些问题&#xff1a;画面突然跳变、主体运动不连贯、镜头移动卡…...

AI编程助手DeepSeek Coder:代码生成效率提升指南

AI编程助手DeepSeek Coder&#xff1a;代码生成效率提升指南 【免费下载链接】DeepSeek-Coder DeepSeek Coder: Let the Code Write Itself 项目地址: https://gitcode.com/GitHub_Trending/de/DeepSeek-Coder 在软件开发领域&#xff0c;开发者每天面临着重复编码、多语…...

基于Qwen3-ASR的智能会议纪要系统:从语音识别到文本摘要全流程

基于Qwen3-ASR的智能会议纪要系统&#xff1a;从语音识别到文本摘要全流程 1. 系统整体效果展示 今天给大家展示一个基于Qwen3-ASR-1.7B语音识别模型构建的智能会议纪要系统。这个系统不仅能准确识别会议中的语音内容&#xff0c;还能自动区分不同说话人&#xff0c;提取关键…...

港科夜闻 | 香港科大“长者护脑社区计划“为6,000名长者提供阿尔兹海默症早筛

关注并星标每周阅读港科夜闻建立新视野 开启新思维1、香港科技大学3月23日宣布推出为期五年的 “长者护脑社区计划”。这项开创性计划以社区为本&#xff0c;旨在为香港基层长者提供阿尔兹海默症及轻度认知障碍的早期检测。香港科大将联同东华学院及十多间社福机构&#xff0c;…...