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?
Quadrum is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
3
What fails is a preflight request to Github. Adjusting the CORS configuration in your Spring application can’t have an impact.
You want to redirect the user to the authorization server, not really to send a cross-origin request from your Vue frontend. What I do in this situation, is change the origin by setting the windows.location.href. But as this is done in single-page code, I have to change the status of the redirection from 302 to something in the 2xx range for the Typescript code to be able to intercept it. I wrote a Spring Boot starter to configure from just application properties this response status (among many other things).
Also note that as you’re using oauth2Login, requests from your Vue app are authorized with session cookies (not Bearer tokens). This complies with current recommendations but implies two things:
- protection against CSRF (cookie based in the case of a single page or mobile app)
- the single-page and Spring backend must be served with the same origin (session cookie is flagged with same-site) => what you need for REST requests from your Vue app to Spring backend is a reverse proxy, not Spring CORS configuration.
I also wrote a Baeldung article with a complete solution: Vue, React and Angular frontends, Spring Cloud Gateway configured with the TokenRelay filter (bridge between session and Bearer based authorizations). and Spring REST APIs configured as resource server.