title: Access has been blocked by CORS policy even though preflight Response is successful 'Access-Control-Allow-Origin' wildcard exists
body: <p>I am not the developer for the server side logic but I am trying to interact with it using Axios on the frontend application. </p>
  
  <p>I have access to the code and its a SpringBoot Application where I have noticed that Cors is enabled:</p>
  
  <pre><code>    @Override
      protected void configure(final HttpSecurity http) throws Exception {
          http.cors() ...
      }
  
      ...
  
      @Bean
      CorsConfigurationSource corsConfigurationSource() {
          final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
          return source;
      }
  </code></pre>
  
  <p>I haved also tried to set the header values myself without calling <code>applyPermitDefaultValues</code>. I can see them in the Chrome Browser Network Tab of the status code 200 <code>OPTIONS</code> request but the console still says:</p>
  
  <pre><code>Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
  </code></pre>
  
  <p>Here is preflight response:</p>
  
  <pre><code>Access-Control-Allow-Headers: authorization, content-type
  Access-Control-Allow-Methods: GET,HEAD,POST,OPTIONS,DELETE,PUT
  Access-Control-Allow-Origin: *
  Access-Control-Max-Age: 1800
  Cache-Control: no-cache, no-store, max-age=0, must-revalidate
  Content-Length: 0
  Date: Thu, 16 Jan 2020 17:18:25 GMT
  Expires: 0
  Pragma: no-cache
  Vary: Origin
  Vary: Access-Control-Request-Method
  Vary: Access-Control-Request-Headers
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  </code></pre>
  
  <p>Making the request:</p>
  
  <p>First create an Axios instance: </p>
  
  <pre><code>Axios.create({
        baseURL:
          process.env.NODE_ENV !== "development"
            ? "..."
            : "...",
        withCredentials: true,
        headers: {
          // Auth token
          Authorization
        }
      })
  </code></pre>
  
  <p>Then I reuse this instance and call <code>this.api.post(...)</code> or any other method. </p>
  
  <p>All of them fail even tho the wildcard is returned, I have no idea where to start.</p>
  
  <p>Why do i still get the cors error. </p>
  
  <p>How can I resolve this?</p>