Java Spring Boot Webflux cors blocked

Question

I am trying to build out an Angular & Spring Boot app with Webflux, and instead of starting by getting bogged down by a full CRUD tutorial with entities and databases I thought I'd start by just seeing if I could get the client to display a string returned by the server, as spring boot's documentation teaches here. To that end, I have the following code:

//Angular client
  private currencyGreetingUrl: string;

  constructor(private http: HttpClient) {
    this.currencyGreetingUrl = 'http://localhost:8080/currency';
  }

  public getCurrencyGreeting(): Observable<string> {
    return this.http.get<string>(this.currencyGreetingUrl);
  }

//Spring Boot Web Client
@CrossOrigin(origins = "http://localhost:4200")
public class CurrencyWebClient {
  private WebClient client = WebClient.create("http://localhost:8080");

  private Mono<ClientResponse> result = client.get()
      .uri("/currency")
      .accept(MediaType.TEXT_PLAIN)
      .exchange();
  
  public String getResult() {
    return ">> result = " + result.flatMap(res -> res.bodyToMono(String.class)).block();
  }
}

//Spring boot handler
@Component
public class CurrencyHandler {

  public Mono<ServerResponse> currency(ServerRequest request) {
    return ServerResponse.ok().contentType(MediaType.TEXT_PLAIN)
      .body(BodyInserters.fromValue("Hello, Currency On The Go!"));
  }
}

//Spring Boot router

@Configuration
public class CurrencyRouter {

  @Bean
  public RouterFunction<ServerResponse> route(CurrencyHandler currencyHandler) {

    return RouterFunctions
      .route(RequestPredicates.GET("/currency").and(RequestPredicates.accept(MediaType.TEXT_PLAIN)), currencyHandler::currency);
  }
}

However, I get this error when running the client and server Access to XMLHttpRequest at 'http://localhost:8080/currency' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am new to Spring Boot and have been looking around for advice, but I've generally found solutions that involve configurations, controller classes, and other more built out artifacts than what I currently have. How could I get this to work? I appreciate any help.

Answer 1

You have decided to use functional endpoints and you are not using spring security of what i can tell from your tags which means all other answers provided here are faulty.

When using functional endpoints you have to be aware that you have opted out of using the traditional annotation based classes. Which means you loose a lot of the free functionality provided by the spring framework

Functional endpoints are more "low level". So the responsibility falls on you the developer to handle CORS.

If you are a beginner on Spring and webflux i would not pick this route.

The documentation states in the CORS chapter in the official webflux documentation:

You can apply CORS support through the built-in CorsWebFilter, which is a good fit with functional endpoints.

They even provide an implementation of a standard CORS filter that you can customize to your needs.

@Bean
CorsWebFilter corsFilter() {

    CorsConfiguration config = new CorsConfiguration();

    // Possibly...
    // config.applyPermitDefaultValues()

    config.setAllowCredentials(true);
    config.addAllowedOrigin("https://domain1.com");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);

    return new CorsWebFilter(source);
}

There is 100s of webpages on the internet that explain CORS and it is the most common question asked in the spring-boot, spring-security tag. I suggest you read up on CORS (which you should of done before asking here).

I highly suggest you start reading here:

Mozilla CORS

Answer 2

Have you configured cors properly? If not try following: https://stackoverflow.com/a/67605427/9295125

Please also read the second answer as the posted answer misses one line.

Answer 3

For my purposes when using Webflux with a browser-based front-end where I need to test quickly, I use a CORS-enabling Chrome extension to test quickly. This is obviously not great for production.

If you are in a pure microservice / backend communication situation, you may just need to go with Spring's intended workflow. In my experience, Spring Webflux has some powerful outcomes but finicky setup. Those configuration classes that you mentioned but are avoiding, or annotations or DSL-based solutions for Kotlin are, unfortunately for now, the intended way. In my experience they do work, and once you have them set up it's a matter of making a quick github-ready template for other microservices (I was building Microservices with Spring and Kotlin at the time).

EDIT: I will also just add that those configurations and classes you're avoiding are worth your time, even a morning of your time spent on those will pave the way for a lot of productivity. Webflux is great (and I've used it both with Kotlin and Java) but there are some unavoidable gotchas and configuration differences when you jump to asynchronous / reactive webflux land. The joy in the config comes when you realize you did things right and it's your DB driver that's freaking out when you can push so many requests :) :) :)

Answer 4

Indeed I did need to use the CorsWebFilter. However, after reading a bit on Spring Boot and its Dependency Injection system, and looking at different tangentially related cors implementation in Spring Boot projects that didn't use functional endpoints, I found that I had to place the ``CorsWebFilter``` at the root of my application like so:

@SpringBootApplication
public class ServerApplication {
    public static void main(String[] args) {
        SpringApplication.run(ServerApplication.class, args);
        CurrencyWebClient client = new CurrencyWebClient();

        System.out.println(client.getResult());
    }

    @Bean
    CorsWebFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:4200");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

This of course, is not the only way to do it. But it solved this little initial problem I had. Thanks all.