Spring Boot HTTPS with CORS, Angular 5 double all requests

Question

a have a Spring boot(v5) with embeded tomcat REST API for my small Angular 5 website, and this REST API is on https protocol, so I need to enable cors origin to let my website communicate with REST API. How do I did that:

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

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(true)
                        .allowedOrigins("*")
                        .allowedMethods("*")
                        .allowedHeaders("*");
            }
        };
    }
}

But with this cors origin, my website started to sent 2 requests for all requests, first is OPTION request, second is real one(get,post etc).

I assume this is bad, at least for load to the server(instead of sending one request, I'm always send two(even tho first is very light weight option request), I don't see this behavior on any website(for example stackoverflow :) )

Example:

So I assume I'm doing something wrong, so how to set up cors origin(or something else maybe), in right way?

score 0 · Answer 1 · answered Apr 25 '18 at 10:40

This is normal and its not your code, Its browser.

The first PREFLIGHT request is send as OPTIONS to check the headers only and to avoid side effects of sending first request as GET or POST.

CORS is mainly implemented to bring security to browsers using the response headers. Suppose, you are sending data to some cross domain server and the server doesn't have the appropriate headers but, as your request is GET or POST a valid request the server will process request normally while browser will show CORS error due to absence of headers.

As a safeguard to this situation a preflight request is made as OPTIONS to check the response headers server send before making the original request. If server dosen't sent proper headers the browser will not make original request.

If this is normal why I don't see this behavior on any website? For example stackoverflow? or any other? To be honest, I cannot found any website with this behavior. p.s. sorry for copy paste — user2870934, Apr 25 '18 at 10:58
@user2870934 OPTIONS requests are restricted to Ajax requests where content type is other than `plaintext`. Stackoverflow uses form submissions that's why OPTIONS is not there. If you make a ajax request with content type as application/json it will make OPTIONS request first. — Atul Sharma, Apr 25 '18 at 11:29

score 0 · Answer 2 · answered Apr 25 '18 at 10:43

0

You are not doing anything wrong. The first OPTION request is Preflight request automatically issued by the browser. It checks if the server actually allows request from the origin,method etc. You can set max age, CorsConfiguration.setMaxAge, which tell browser to cache Preflight response for certain period.

answered Apr 25 '18 at 10:43

Adisesha

5,200
1
32
43

If this is normal why I don't see this behavior on any website? For example stackoverflow? or any other? To be honest, I cannot found any website with this behavior. p.s. sorry for copy paste. – user2870934 Apr 25 '18 at 11:00
and yes, max age is helping a bit, but if I send some new path(or parameters) to the server, before that requests "browser" is making option request, so if this is pagination(new page with new parameters) it would be same behavior like without max age – user2870934 Apr 25 '18 at 11:00
You don't see it if the origin and request url are same. Observe request urls in case of StackOverflow. Yes, max age provides little help. See first answer here, https://stackoverflow.com/questions/12013216/how-to-apply-cors-preflight-cache-to-an-entire-domain – Adisesha Apr 25 '18 at 11:25

score 0 · Answer 3 · answered Apr 25 '18 at 10:47

0

First request is type OPTIONS, it's normal. The HTTP OPTIONS method is used to describe the communication options for the target resource.

Read more about it here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

answered Apr 25 '18 at 10:47

Krzysztof Raciniewski

4,735
3
21
42

If this is normal why I don't see this behavior on any website? For example stackoverflow? or any other? To be honest, I cannot found any website with this behavior. p.s. sorry for copy paste – user2870934 Apr 25 '18 at 10:58

score 0 · Answer 4 · answered Apr 25 '18 at 15:59

I don't think you are doing anything wrong, it is normal. If you are sending any custom headers besides headers that are automatically sent, browser makes the OPTION request first to be safer.

Preflighted requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

Refer here for details on on CORS.

Spring Boot HTTPS with CORS, Angular 5 double all requests

4 Answers4