宝塔部署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/文件已经存在全局反向代理

出现这种情况是因为网站开启了伪静态

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

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

相关推荐
码客前端1 天前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛1 天前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程1 天前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保1 天前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫1 天前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
博主花神1 天前
【React】扩展知识点
javascript·react.js·ecmascript
内存不泄露1 天前
基于Spring Boot和Vue 3的智能心理健康咨询平台设计与实现
vue.js·spring boot·后端
欧阳天风1 天前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder1 天前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理1 天前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活