Search code examples
reactjsspring-bootspring-cloud-gateway

White label error on page refresh on react SPA running in spring cloud gateway

I am working on a spring-boot react full-stack application. I have used the spring cloud gateway as my API gateway to route the requests to the upstream microservices. Also, my react SPA is also running on the spring cloud gateway.

When I run the spring cloud gateway application, I am able to load the frontend GUI.

When I navigate through the GUI it works fine

enter image description here

but when I do refresh, I get the white label error.

I will have to load the landing page again and navigate only through the GUI.

enter image description here

I have tried to configure the gateway application as below but it does not work.

@Bean
public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer(){
    return factory -> {
      ErrorPage errorPage = new ErrorPage(HttpStatus.NOT_FOUND,"/index.html");
      factory.addErrorPages(errorPage);
    };
}


package com.xpense.service;

import org.springframework.boot.web.server.ErrorPage;
import org.springframework.boot.web.server.ErrorPageRegistrar;
import org.springframework.boot.web.server.ErrorPageRegistry;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;

@Component
public class ErrorPageConfig implements ErrorPageRegistrar {
@Override
public void registerErrorPages(ErrorPageRegistry registry) {
    registry.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND,"/index.html"));
}
}

below is the routing configuration

server:
port: 10443
spring:
 application:
   name: xpense-api-gateway
cloud:
  gateway:
    routes:
    - id: xpense-service
      uri: http://localhost:18080/
      predicates:
        - Path=/xpense/service/**

please help

Solution

  • Since your using client side routing, instead of using browser router use hash router. More information can be found in What is the difference between HashRouter and BrowserRouter in React?