OAuth2.0 - authentication using GitHub with front-end and back-end running on different servers. CORS error

Question

I\'m trying to create an application that has front-end and back-end assets separated. For the sake of example, let\'s say that front-end side will eventually be hosted on g

Answer 1

If you are using Spring-Boot you can do this in your spring configuration:

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://localhost:8080", "http://127.0.0.1:8080");
            }
        };
    }

Answer 2

The CORS message you’re seeing is because your code is sending a cross-origin request to https://github.com/login/oauth/authorize but the response from github doesn’t include the Access-Control-Allow-Origin response header.

So whatever changes you make to the CORS configuration in your Spring code won’t matter—it won’t make any difference because the behavior that would need to change is on the github side and you can’t change that.

You probably either want to do the oauth request from your backend rather than your frontend code as you’re doing now, or else set up a CORS proxy using https://github.com/Rob--W/cors-anywhere/ or such, or else set up something like https://github.com/prose/gatekeeper:

Because of some security-related limitations, Github prevents you from implementing the OAuth Web Application Flow on a client-side only application.

This is a real bummer. So we built Gatekeeper, which is the missing piece you need in order to make it work.

Gatekeeper works well with Github.js, which helps you access the Github API from the browser.