Axios request gets stopped by CORS

Question

I have a react based frontend and a spring backend (which uses spring security). I have disabled CORS in the spring security configuration (at least I think so) but the requests still gives this error:

Access to XMLHttpRequest at 'http://localhost:8080/api/v1/registration/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is the frontend:

const register = () => {
        //var url = process.env.REACT_APP_SERVER_IP + "/api/v1/registration";
        var url = "http://localhost:8080/api/v1/registration/";
        var userData = {
            email: "test@test.com",
            username: "uname",
            password: "pass"
        }

        axios.post("http://localhost:8080/api/v1/registration/", userData
        ).then(function (response) {
            alert(response);
        }).catch(function (error) {
            alert(error);
        });
    }

This is the backend:

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and().csrf().disable()
                .authorizeRequests()
                .antMatchers("/api/v*/registration/**")
                .permitAll()

                .anyRequest()
                .authenticated().and()
                .formLogin();
    }

Any idea as to why requests are still blocked?

@Szelek Yeah, I made a bean with `CorsConfiguration` and was able to set the react as an exception. The full code is a bit long to post here as an answer though. — Ivaldir, Oct 14 '21 at 17:54

score 2 · Accepted Answer · answered Oct 14 '21 at 18:08

I solved the problem by adding in the react application as an exception. The security settings are as follows:

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors();
    http.csrf().disable();

    // Authorize all requests.
    http.authorizeRequests()
        .antMatchers("/api/v*/registration/**")
        .permitAll()
        .anyRequest()
        .authenticated().and()
        .formLogin();
}

The react application was set as an exeption using this bean within the security config.

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Collections.singletonList(corsConfig.getAddress()));
    configuration.setAllowedMethods(Arrays.asList("GET","POST", "PUT", "DELETE", "PATCH", "OPTIONS"));
    configuration.setExposedHeaders(Arrays.asList("Authorization", "content-type"));
    configuration.setAllowedHeaders(Arrays.asList("Authorization", "content-type"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

Here the corsConfig.getAddress() gets the address of the react application from a config I setup, for example http://localhost:3000. Also note that in the code csrf is disabled, which as others have noted isn't a great idea.

score 0 · Answer 2 · answered May 04 '21 at 23:20

you have not disabled cors. You have missed stating disable after the cors declaration.

http.cors().disable()
    .and()
    .csrf().disable()

Remember it's bad practice to disable cors and csrf they are security features there to protect your application.

score -1 · Answer 3 · answered May 04 '21 at 21:44

I think this question is duplicated

The CORS blocks requests on the client and is your browser that is preventing the ajax requests to be executed because the server is not allowing them.

The server can actually choose to return something that the client allows or not.

In this case you probably should enabled the CORS support in Spring so that OPTIONS requests are allowed even if not in a secure request.

You should then configure the CORS allowed origins, methods and other relative configuration accordingly.

Find more on Cross-Origin Resource Sharing (CORS) here

Axios request gets stopped by CORS

3 Answers3