带有CORS的Spring Boot HTTPS，Angular 5将所有请求加倍

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.