Spring Cloud Gateway Can't Forward to React Vite Dev Server, Works After Nginx Build

Question

I'm having trouble getting Spring Cloud Gateway to forward requests to my React application when it's running in development mode with Vite. Here's the breakdown:

Development: When I run npm run dev to start Vite's development server (typically on http://localhost:5473), Spring Cloud Gateway fails to forward requests to it. I get a connection refused error. Production: After building my React app with vite build and packaging it into a Docker image with Paketo buildpacks NGINX, Spring Cloud Gateway forwards requests successfully.

This is Spring cloud gateway configuration:

spring:
  application:
    name: edge-service
  lifecycle:
    timeout-per-shutdown-phase: 15s
  cloud:
    gateway:
      redis-rate-limiter:
        include-headers: true
      httpclient:
        connect-timeout: 2000
        response-timeout: 5s
        pool:
          type: elastic
          max-idle-time: 15s
          max-life-time: 60s
      default-filters:
        - SaveSession
        - TokenRelay
        - name: RequestRateLimiter
          args:
            redis-rate-limiter:
              replenishRate: 10
              burstCapacity: 20
              requestedTokens: 1
        - name: Retry
          args:
            retries: 3
            method: GET
            series: SERVER_ERROR
            exceptions: java.io.IOException, java.util.concurrent.TimeoutException
            backoff: # firstBackoff * (factor ^ n)
              firstBackOff: 50ms
              maxBackOff: 500ms
              factor: 2
              basedOnPreviousValue: false
      routes:
        - id: spa-route
          uri: ${SPA_URL:http://localhost:5173}
          predicates:
            - Path=/, /assets/*.css, /assets/*.js, /assets/*.svg, /index.html, /vite.svg

This is vite.config.ts:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist/bookstore-ui',
    emptyOutDir: true
  }
})

After build react vite:

my-react-app/
|__ dist/
    |__ bookstore-ui  
        |__index.html
        |__vite.svg
        |__assets
           |__index-DH6DDCTG.js
           |__index-y2ajvZYl.css

And build image vs Paketo buildpack:

pack build bookstore-ui --buildpack paketo-buildpacks/nginx \
--builder paketobuildpacks/builder-jammy-base \
-e BP_WEB_SERVER=nginx \
-e BP_WEB_SERVER_ROOT=bookstore-ui \
-p dist

Why does Spring Cloud Gateway work with the Nginx-served production build but not with the Vite development server? Are there specific configurations I need to adjust for Vite's development server to make this work?

I expected Spring cloud gateway forward to ui service (React Vite) serving at http:localhost:5473 but Connection Refused

Answer 1

You need to change vite configuration server.host to true or "127.0.0.1". Vite is served on 'localhost' as default but Spring Cloud Gateway is translating localhost to 127.0.0.1.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist/bookstore-ui',
    emptyOutDir: true
  },
  server: {
   host: true
  }
})