CORS not working with Spring Boot and Spring Cloud without Spring Security

Question

I am using Spring Boot 2.2.4.RELEASE with Spring Cloud Hoxton.SR1 and without Spring Security, In that GET method is working fine but POST & PUT methods are not working.

@Configuration
@Order(value = Integer.MAX_VALUE)
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:5500")
            .allowedHeaders("*")
            .allowedMethods("POST", "PUT", "DELETE", "HEAD");
    }
}

@Component
public class SimpleCORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

        chain.doFilter(req, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }

}

AngularJS Code

    $http({
        method: 'POST',
        url: 'http://b28c-103-85-11-107.ngrok.io/game/brand-styles',
        data: {
            "fontColour": "FFFFFF",
            "backgroundColour": "006400",
            "displayType": 1,
            "buttonColour": "FFC314"
            }
        })
        .then(function (response) { $scope.data = data; })
        .catch(function (err) { console.log(err) });

I have tried multiple ways to solve the issue as suggested on same platform in different questions but no one worked for me.

Answer 1

Access to XMLHttpRequest at 'http://b28c-103-85-11-107.ngrok.io/game/brand-styles' from origin 'http://localhost:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

POST http://b28c-103-85-11-107.ngrok.io/game/brand-styles net::ERR_FAILED

The possible reason behind the issue in your case would be due to the following statement that you've mentioned in the SimpleCORSFilter class.

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

Looks like Origin header is dropped before reaching to your local server or may be dropped by the local server itself. You can try with the following change to verify your case.

response.setHeader("Access-Control-Allow-Origin", "http://localhost:5500");