当前位置: 首页 > 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/文件已经存在全局反向代理

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

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

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

http://www.lryc.cn/news/432719.html

相关文章:

  • C++智能指针简述
  • 龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮
  • Android Camera系列(二):TextureView+Camera
  • DFS算法专题(一)——二叉树中的深搜【回溯与剪枝的初步注入】
  • AWS SES服务 Golang接入教程(排坑版)
  • Vite + Vue3 +Vant4出现Toast is not a function
  • 【MATLAB】模拟退火算法
  • 什么是Kubernetes RBAC?
  • 在Spring Boot中通过自定义注解、反射以及AOP(面向切面编程)
  • 安防监控视频平台LntonAIServer视频智能分析平台新增视频质量诊断功能
  • vscode从本地安装插件
  • Superset二次开发之新增复选框Checkbox筛选器
  • PromQL 语法
  • 掌握Go语言中的时间与日期操作
  • 4G模块、WIFI模块、NBIOT模块通过AT指令连接华为云物联网服务器(MQTT协议)
  • spring数据校验Validation
  • Uniapp基于uni拦截器+Promise的请求函数封装
  • 【工具】使用 Jackson 实现优雅的 JSON 格式化输出
  • ApacheKafka中的设计
  • .NET 自定义过滤器 - ActionFilterAttribute
  • VMware Fusion Pro 13 for Mac虚拟机软件
  • HarmonyOS应用开发环境搭建
  • YOLOv8改进实战 | 注意力篇 | 引入ICCV2023顶会LSKNet:大选择性卷积注意力模块LSKA,助力小目标检测
  • 00Mac安装playwright
  • materail3 CircularProgressIndicator和LinearProgressIndicator有难看的白块和断点
  • 菜鸟入门Docker
  • 什么是单片机?为什么要学习单片机?
  • 电子发射与气体导电
  • 【数据库】MySQL表的Updata(更新)和Delete(删除)操作
  • Unity Adressables 使用说明(六)加载(Load) Addressable Assets