springboot vue前后端分离配置

### 实现Spring Boot和Vue.js前后端分离的最佳实践

#### 项目结构规划
为了更好地管理前后端代码，在创建新项目时应分别建立独立的目录用于存放前端(Vue.js)和后端(Spring Boot)代码。这种做法有助于团队协作以及后期维护。

对于前端部分，推荐采用`vue-cli`脚手架来初始化工程[^3]：

npm install -g @vue/cli
vue create frontend-project-name

而后端则可以利用IDE(如IntelliJ IDEA Ultimate Edition)中的内置向导快速生成基础框架，或者通过Maven/Gradle命令行工具完成相同操作[^1]。

#### 配置跨域资源共享(CORS)

由于浏览器同源策略限制，默认情况下不允许来自不同域名下的请求访问资源。因此当运行于localhost的不同端口上的服务尝试通信时就会遇到障碍。解决办法是在服务器端开启CORS支持:

在Spring Boot应用程序中可以通过全局配置类的方式轻松实现这一点[^2]:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//允许所有路径被跨域调用
            .allowedOrigins("*") //允许任何来源发起跨域请求
            .allowCredentials(true)//是否发送Cookie凭证信息
            .maxAge(3600);         //预检请求的有效期为一个小时
    }
}

#### 设置代理转发

虽然上述方法解决了开发阶段的问题，但在生产环境中通常不会直接暴露真实IP地址给客户端应用。此时就需要借助反向代理服务器（Nginx）来进行流量分发并隐藏实际的服务位置。

编辑nginx.conf文件添加如下规则即可达到目的：

server {
    listen       80;
    server_name  localhost;

    location /api/ {           #匹配/api开头的所有URL
        proxy_pass http://127.0.0.1:8080;#将这些请求转交给本地8080端口监听着的springboot服务处理
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {               #其他未指定前缀的url都由vue编译后的静态页面响应
        root   html/dist/;
        try_files $uri $uri/ /index.html;
    }
}

以上就是关于如何在一个完整的Web应用程序里运用SpringBoot作为后台接口层而VueJs负责展示逻辑的具体指导说明。