CORS with gateway

Question

I must create some microservices using spring-boot. Created MailService with only one controller and configured CORS:

package com.smdev.mailservice.controller;

import com.smdev.mailservice.model.dto.EmailAddress;
import com.smdev.mailservice.model.dto.SendMailDTO;
import com.smdev.mailservice.service.MailService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiResponse;
import io.swagger.annotations.ApiResponses;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;

@Api
@RestController
@RequestMapping("/api/mail")
@CrossOrigin(origins = "*", methods = {RequestMethod.POST, RequestMethod.OPTIONS})
public class MailSendController {

    private final MailService mailService;

    @Autowired
    public MailSendController(MailService mailService) {
        this.mailService = mailService;
    }

    @ApiOperation(value = "Send message from 'Contact Us' form")
    @ApiResponses({
            @ApiResponse(code = 200, message = "E-Mail send successfully"),
            @ApiResponse(code = 400, message = "Invalid data sent", response = ResponseEntity.class)
    })
    @PostMapping(value = "/feedback", consumes = {MediaType.APPLICATION_JSON_VALUE})
    public void feedback(@Valid @RequestBody SendMailDTO sendMailDTO){
        mailService.sendMessage(sendMailDTO, EmailAddress.FEEDBACK);
    }

}

Here i also have GatewayService:

package com.smdev.gatewayservice;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.gateway.route.RouteLocator;
import org.springframework.cloud.gateway.route.builder.RouteLocatorBuilder;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
public class GatewayServiceApplication {

    public static void main(String[] args) {
        SpringApplication.run(GatewayServiceApplication.class, args);
    }

    @Bean
    public RouteLocator getRouteLocator(RouteLocatorBuilder routeLocatorBuilder){
        return routeLocatorBuilder.routes()
                .route(p -> p
                        .path("/api/mail/**")
                        .uri("http://localhost:8001"))
                .build();
    }

}

This API will be called from Angular Front-end. When i'm calling api using curl:

curl -X POST -H "Content-type: application/json" -d '{some json data}' localhost:8000/api/mail/feedback

everything works fine. But when i call from FE:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ContactUs } from '../model/contact-us';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) { }

  sendContactUs(dto: ContactUs): Observable<any> {
    return this.httpClient.post(`${environment.apiUrl}/mail/feedback`, dto);
  }
}

Im getting CORS error. I think the reason is that i must configure CORS in GatewayService, but i found no info about that.

Spring-security isn't used here

Answer 1

try something like this ( example on version spring-boot 2.4.9 and spring-cloud 2020.0.3)

handle cors on gateway adding this class bellow in spring-cloud-gateway project

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsConfigurationSource;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsWebFilter corsFilter() {
        return new CorsWebFilter(corsConfigurationSource());
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration().applyPermitDefaultValues();
        config.addAllowedMethod(HttpMethod.PUT);
        config.addAllowedMethod(HttpMethod.DELETE);
        config.addAllowedMethod(HttpMethod.GET);
        config.addAllowedMethod(HttpMethod.OPTIONS);
        config.addAllowedMethod(HttpMethod.POST);

        source.registerCorsConfiguration("/**", config);
        return source;
    }

}

That's important check if there are duplicated values on cors when crossing requests

return routeLocatorBuilder.routes()
                .route(p -> p
                    .path("/api/mail/**")
                  
                    // something like this
                    .filters(f -> f.dedupeResponseHeader("Access-Control-Allow-Origin", "RETAIN_UNIQUE"))
                    .uri("http://localhost:8001")
                )
                .route( ... )
                .route( ... )
                .build();