Spring Cloud Gateway无法转发至Vite开发服务器，生产环境正常

核心原因 #

你的问题主要来自两个关键配置不匹配，加上Vite开发服务器的默认限制：

1. Gateway目标端口错误：配置里默认SPA_URL是http://localhost:5173，但你的Vite开发服务器实际运行在5473，导致Gateway连错端口触发连接拒绝。
2. Vite开发服务器监听限制：Vite默认只绑定127.0.0.1，如果Gateway运行在容器/独立进程中，localhost指向的是Gateway自身的运行环境，而非Vite所在的宿主机器，无法建立连接。
3. 路由规则覆盖不全：当前Gateway的Path规则只包含了静态资源和根路径，未覆盖Vite热更新（HMR）所需路径，也未处理React SPA的路由 fallback。

具体修复步骤 #

1. 修正Gateway的目标地址 #

修改Spring Cloud Gateway配置中的spa-route uri，或者通过环境变量指定正确的Vite地址：

• 方式一：直接修改配置文件

  routes:
    - id: spa-route
      uri: http://localhost:5473 # 替换为你的Vite实际端口
      predicates:
        - Path=/** # 先改为全路径覆盖，后续再细化
  

• 方式二：设置环境变量
  启动Gateway时传入SPA_URL=http://localhost:5473。

2. 调整Vite开发服务器配置 #

修改vite.config.ts，让Vite监听所有网络接口，并允许跨域（适配Gateway转发场景）：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0', // 允许外部访问
    port: 5473, // 明确指定端口，避免随机端口
    cors: true // 允许跨域请求（Gateway转发时可能需要）
  },
  build: {
    outDir: 'dist/bookstore-ui',
    emptyOutDir: true
  }
})

3. 完善Gateway的SPA路由规则 #

为了适配React SPA的路由和Vite热更新，调整Gateway的路由规则，确保所有路径都能正确转发，同时处理静态资源：

routes:
  # 匹配Vite热更新和静态资源
  - id: vite-static-route
    uri: ${SPA_URL:http://localhost:5473}
    predicates:
      - Path=/assets/**, /@vite/client, /vite-hmr/**, /vite.svg
  # SPA路由fallback
  - id: spa-fallback-route
    uri: ${SPA_URL:http://localhost:5473}
    predicates:
      - Path=/**
    filters:
      - RewritePath=/(?<path>.*), /index.html

4. 验证连接 #

• 重启Vite开发服务器，确认它监听在0.0.0.0:5473；
• 重启Spring Cloud Gateway，检查日志中是否有连接成功的记录；
• 访问Gateway的地址，验证React应用是否能正常加载，热更新功能是否可用。

为什么生产环境正常？ #

生产环境中你用NGINX托管静态文件，NGINX默认监听所有接口，且Gateway的路由规则匹配了静态资源路径，同时NGINX会自动处理SPA的路由 fallback（若已配置），所以没有连接问题。

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