springboot整合vue前后端分离，前后端的端口号一定要不同吗

Spring Boot整合Vue进行前后端分离时，前后端的端口号不一定要不同。但是在开发期间，通常会将前端和后端放在不同的端口以避免冲突和跨域问题，这使得前后端可以独立开发和部署。生产环境中，通常会部署一个反向代理服务器，如Nginx，来统一处理外部请求并转发给相应的前后端服务，此时前后端可以使用相同的端口号。

在开发环境中，前端Vue应用通常使用webpack-dev-server运行在特定端口（如8080），而Spring Boot后端服务运行在另一个端口（如8081）。为了解决跨域请求问题，Vue应用可以配置代理来转发API请求到Spring Boot服务。

一、开发环境中的端口配置

在前后端分离开发中，配置不同的端口号有助于开发者区分和管理前后端服务，同时使得并行开发变得简单高效。

前端端口配置

通常，前端项目使用webpack-dev-server来搭建本地开发服务器，端口配置通常在Vue项目的vue.config.js文件中进行设定。将前端运行在默认的8080端口或其他未被后端占用的端口上。

module.exports = {
  devServer: {
    port: 8080 // 前端端口号
    // 其他配置...
  }
}

后端端口配置

Spring Boot应用的端口号配置在application.properties或application.yml文件中。例如：

server.port=8081 # 后端端口号

二、跨域问题与解决方案

由于浏览器的同源策略限制，不同端口的前后端应用被认为是不同的源。因此直接调用会引发跨域问题。解决跨域的主要方法是通过CORS（Cross-Origin Resource Sharing）或者配置代理。

CORS配置

Spring Boot可以通过添加CORS配置来允许特定源的访问：

@Configuration
public class WebConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/")
      .allowedOrigins("http://localhost:8080")
      .allowedMethods("GET", "POST", "PUT", "DELETE")
      .allowCredentials(true);
  }
}

代理配置

在Vue的开发环境中，可以通过配置代理来解决跨域问题。在vue.config.js中设定代理：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

三、生产环境中的部署配置

在生产环境中，前后端一般运行在同一个域名和端口号下，这个时候代理通常由Nginx或其他服务器软件实现。

Nginx配置示例

在Nginx中配置路由分发，将请求转发至前后端服务。

server {
  listen 80;
  location / {
    root /path/to/vue/dist; # 前端静态文件目录
    try_files $uri $uri/ /index.html;
  }
  location /api {
    proxy_pass http://localhost:8081; # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}