Access has been blocked by CORS policy even though preflight Response is successful 'Access-Control-Allow-Origin' wildcard exists

Question

I am not the developer for the server side logic but I am trying to interact with it using Axios on the frontend application.

I have access to the code and its a SpringBoot Application where I have noticed that Cors is enabled:

    @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;
    }

I haved also tried to set the header values myself without calling applyPermitDefaultValues . I can see them in the Chrome Browser Network Tab of the status code 200 OPTIONS request but the console still says:

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.

Here is preflight response:

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

Making the request:

First create an Axios instance:

Axios.create({
      baseURL:
        process.env.NODE_ENV !== "development"
          ? "..."
          : "...",
      withCredentials: true,
      headers: {
        // Auth token
        Authorization
      }
    })

Then I reuse this instance and call this.api.post(...) or any other method.

All of them fail even tho the wildcard is returned, I have no idea where to start.

Why do i still get the cors error.

How can I resolve this?

Answer 1

From this:

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.

I reckon the source of your troubles is that the request's withCredentials attribute is set to true in which case Access-Control-Allow-Origin: * can't be used, even if there is no Access-Control-Allow-Credentials header.

For more information, on the withCredentials parameter and the response header look at this article: https://www.ozkary.com/2015/12/api-oauth-token-access-control-allow-credentials.html