springboot vue 项目部署解决跨域问题

### 宝塔面板部署 SpringBoot 后端与 Vue 前端项目的教程及配置方法 #### 一、环境搭建 在宝塔面板上部署 SpringBoot 和 Vue 构成的全栈项目前，需先完成基础环境的安装。这通常包括 Java 运行环境以及 Nginx 或 Apache 的配置。 - **Java 环境**：SpringBoot 应用依赖于 JDK，因此需要在服务器上安装适合版本的 JDK[^1]。 - **Nginx/Apache 配置**：Vue 前端应用可以通过静态文件服务的方式运行，推荐使用 Nginx 来提供高效的静态资源加载能力[^2]。 ```bash # 在 CentOS 上安装 OpenJDK (以 JDK8 为例) sudo yum install java-1.8.0-openjdk-devel java -version ``` --- #### 二、后端部署（SpringBoot） 对于 SpringBoot 后端部分，主要涉及以下几个步骤： 1. **打包 SpringBoot 工程** 使用 Maven 或 Gradle 将工程构建为可执行 JAR 文件。命令如下： ```bash mvn clean package -DskipTests ``` 打包完成后会在 `target` 目录下生成 `.jar` 文件。 2. **上传并启动 SpringBoot** 利用 FTP/SFTP 工具或者宝塔自带的文件管理器将 `.jar` 文件上传到服务器指定路径。随后可通过以下方式启动程序： ```bash nohup java -jar your-springboot-app.jar > app.log 2>&1 & tail -f app.log ``` 3. **防火墙设置** 如果 SpringBoot 提供的服务监听特定端口，则需要开放该端口以便外部访问。例如，假设 SpringBoot 默认监听的是 8080 端口： ```bash firewall-cmd --zone=public --add-port=8080/tcp --permanent firewall-cmd --reload ``` 4. **反向代理配置** 可选地，可以利用 Nginx 对外暴露统一接口地址，并隐藏实际的 SpringBoot 端口号。编辑 Nginx 配置文件 `/etc/nginx/conf.d/springboot.conf` 添加如下内容： ```nginx server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` --- #### 三、前端部署（Vue） 针对 Vue 前端部分，其核心在于将编译后的静态文件托管至 Web 服务器中。 1. **打包 Vue 工程** 类似于后端操作，首先需要对 Vue 项目进行生产环境下的打包处理： ```bash npm run build ``` 此过程会生成位于 `dist` 文件夹中的静态资源文件集合。 2. **上传静态文件** 把上述生成好的 `dist` 文件夹复制到目标主机上的某个目录里，比如 `/www/wwwroot/vueapp`。 3. **配置 Nginx 路由规则** 修改对应的站点配置文件来支持单页应用程序（SPA），确保刷新页面时不会返回 404 错误： ```nginx server { listen 80; server_name your-domain.com; root /www/wwwroot/vueapp; index index.html; location / { try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 4. **测试连接** 浏览器输入域名验证是否能够正常展示首页界面，同时确认 API 请求能否成功抵达后台服务节点。 --- #### 四、注意事项 - **跨域问题解决** 若前后端分离部署在同一台机器的不同端口上，默认情况下会产生 CORS （Cross-Origin Resource Sharing）限制现象。可以在 SpringBoot 中添加全局过滤器或单独控制器实现允许跨域请求的功能；也可以借助 Nginx 统一转发机制规避此麻烦。 - **性能优化建议** 生产环境下应考虑启用 HTTPS 加密传输协议保护数据安全；另外还可以引入缓存策略减少数据库查询压力提升响应速度等措施进一步增强用户体验效果。 ---