Spring + Vue + OAuth2 - CORS Missing Allow Origin

The Backend runs on localhost:8088 The Frontend runs on localhost:8000

When making the request to login, the frontend sends a POST to the specific backend API

return axios.post('/oauth2/authorization/github');

This returns a redirect URL to github.com/login/oauth/authorize/, which is correct. I was able to confirm this by using the provided URL manually.

The browser now sends an OPTIONS request to the /authorize, but then yields "CORS Missing Allow Origin" as "Transferred" and thereby blocks the request.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://github.com/login/oauth/authorize?response_type=code&client_id=XXX&scope=read:user&state=XXX%3D&redirect_uri=http://localhost:8088/login/oauth2/code/github. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.

Indeed, the Allow Origin is missing from the requests getting blocked. Is there something I am missing?

First POST Request (passes) CORS Missing Allow Origin

What I already tried:

I have already defined a CORS Confiuration in the backend, as well as default Access-Control-Allow-Origin headers for the frontend sending the first request.

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    final CorsConfiguration corsConfiguration = new CorsConfiguration().applyPermitDefaultValues();
    corsConfiguration.addAllowedOrigin("http://localhost:8000");
    corsConfiguration.addAllowedOrigin("GitHub.com");
    corsConfiguration.setAllowedMethods(Arrays.asList("POST", "GET", "PUT", "PATCH", "DELETE", "OPTIONS"));
    corsConfiguration.setAllowCredentials(true);
    source.registerCorsConfiguration("/**", corsConfiguration);
    return source;
}

I have also found out that manually resending the first POST request also appears to work, which is weird, considering I am not editing it in any way. Possibly due to missing "strict-origin-when-cross-origin" as Referrer Policy?

Solution

This is a OAuth2 authorization endpoint and you're not supposed to make fetch() requests to it. You need to redirect the user to this URL, after which they will get redirected back to your app.