Docker部署全栈应用出现Vite前端CORS请求失败问题求助

1. Vite代理仅适用于开发环境：你配置的server.proxy是Vite开发服务器的代理规则，仅在vite dev本地开发时生效，生产构建（vite build）后该配置完全失效，这是和Create React App的核心差异点。
2. 前端请求地址错误：错误日志显示前端直接请求https://backend:8080/api/link/，backend是Docker内部容器域名，浏览器无法解析该地址，且跨域请求触发同源策略拦截。
3. 生产环境缺少反向代理：部署到VPS后，前端和后端分属不同服务（或容器），需要通过Web服务器做反向代理统一域名，避免跨域。

1. 修正前端请求路径 #

将前端代码中所有硬编码的https://backend:8080替换为相对路径（如/api/link/），这样生产环境下请求会自动以你的自定义域名为基准发起，无需跨域。

2. 配置Nginx反向代理（生产环境必做） #

用Nginx作为前端静态文件服务器+反向代理，将/api开头的请求转发到后端容器。以下是适配Docker部署的Nginx配置示例：

server {
    listen 80;
    server_name your-custom-domain.com; # 替换为你的自定义域名

    # 托管Vite构建后的前端静态文件
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html; # 适配SPA路由
    }

    # 反向代理后端API请求
    location /api {
        proxy_pass http://backend:8080; # Docker内部后端容器地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

将该配置文件挂载到Nginx容器中，并确保前端、后端、Nginx容器处于同一Docker网络，保证Nginx能解析backend容器名。

3. 调整开发环境代理（可选，保持本地开发一致性） #

如果本地开发时后端运行在Docker容器中，修改Vite配置的target为Docker内部地址：

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://backend:8080", // 本地Docker后端地址
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
    port: 3000,
  },
  plugins: [react()],
});

4. 兜底验证后端CORS配置 #

确保Spring Boot的CORS配置未被安全规则覆盖，若使用Spring Security，需保证CORS过滤器优先级高于安全过滤器：

@Configuration
public class SecurityConfig {
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.cors().and() // 先启用CORS
            .csrf().disable()
            // 其他安全规则配置...
        return http.build();
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList("*"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
        config.setAllowedHeaders(Collections.singletonList("*"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}

内容的提问来源于stack exchange，提问作者ServletException