OPTIONS API 仅在服务器上首次加载应用程序时调用一次

Question

OPTIONS API is getting called with 200 status code only once when I start the server first time and if I refresh the page again then only GET API is called or if I stop the server and then restart the server then also GET API is called and not OPTIONS API.So is OPTIONS API is called once we load the application first time but as per my understanding when we have spring security then OPTIONS API should be called first before any other API call

HelloWorldController.java

@CrossOrigin(origins="http://localhost:4200")
@RestController
public class HelloWorldController {

@GetMapping(path="/hello/path-variable/{name}")
public HelloWorldBean helloVariable(@PathVariable String name) {
    return  new HelloWorldBean(String.format("Hello message %s",name));
    }}

SpringSecurityConfigurationBasicAuth.java

@Configuration
@EnableWebSecurity
public class SpringSecurityConfigurationBasicAuth extends WebSecurityConfigurerAdapter{

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .csrf().disable()
            .authorizeRequests()
            .antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
                .anyRequest().authenticated()
                .and()
            //.formLogin().and()
            .httpBasic();
    }
}

welcome-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

export class helloWorldBean{
  constructor( public message:string){

  }
}
@Injectable({
  providedIn: 'root'
})

export class WelcomeDataService {

  constructor(private http:HttpClient) {
    
   }


  executeHelloWorldBeanServicePathVarible(name)
  {
    let basicAuthHeaderString=this.createBasicAuthenticationHttpHeader();

    let headers = new HttpHeaders({
Authorization: basicAuthHeaderString

    })
    return this.http.get<helloWorldBean>
    (`http://localhost:8080/hello/path-variable/${name}`, {headers});
  }

  createBasicAuthenticationHttpHeader(){
    let username='user'
    let password='dummy'

    let basicAuthHeaderString='Basic ' + window.btoa(username + ':' + password);
     return basicAuthHeaderString;
  } 
}

Network logs

Request URL: http://localhost:8080/hello/path-variable/user
Request Method: GET
Status Code: 200 
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade

Response:

{"message":"Hello message user"}

Answer 1

The pre-flight request or the OPTIONS call is cached for certain duration depending upon the browser. It is controlled by Access-Control-Max-Age header property.

The first time you start the server and hit the url, browser will invoke OPTIONS method call to fetch the allowed methods etc. But it is then cached and the subsequent requests must be using this cache.

If you don't want to use the cache, it's value should be set to -1.

Access-Control-Max-Age: -1

More Information about this header parameter is here -

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age#:~:text=The%20Access%2DControl%2DMax%2D,Headers%20headers

I believe you can simply set the maxAge in CorsRequest annotation and this will set the Header Parameter for you like this -

@CrossOrigin(origins="http://localhost:4200", maxAge=-1)
@RestController
public class HelloWorldController {

This should disable the cache and all requests will call the Preflight request.