CORS error is not fixed despite allowing all origins, all methods, and all headers

Question

We used Java-Spring boot, and React - CRA. we deployed a server using AWS EC2 and a client using AWS S3.

But the website does not work properly due to a CORS error.

Here is the error I see in my console:

GET http://ec2-13-125-208-244.ap-northeast-2.compute.amazonaws.com:8080/api/questions/1/answers.net::ERR_FAILED 200

We try.....

< In Client >

we used 'http-proxy-middleware' in the development phase and put the server address deployed to EC2 using the .env.development/.env.production environment variable. (Put the EC2 server address in .env.production and an empty string ("") in .env.development to solve the local problem.)

Also, we are using axios and tried putting {withCredentials: true} in the request header

Before using environment variables, set the baseUrl using an instance.

const instance = axios.create({baseURL: '``https://http``://~~.s3-website.ap-northeast-2.amazonaws.com/'});

In 'localhost: 3000', it works fine. But it doesn't work with a static website using Amazon S3.

<In Sever>

We wrote code related to CORS like this, but it didn't work.

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST", "PATCH", "DELETE"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:3000", "http://pre-project-038-client.s3-website.ap-northeast-2.amazonaws.com/questions"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST", "PATCH", "DELETE"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

I know it is vulnerable to security, but I wrote the following code to solve the CORS error in Java.

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.addAllowedOrigins(Arrays.asList("*"));
    configuration.addAllowedMethods(Arrays.asList("*"));
    configuration.addAllowedHeader(Arrays.asList("*"));
    configuration.setAllowCredentials(true);
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

The response status is 200, but still, no data is loaded on the screen due to a CORS error.

What can we try on the client or server side?

Answer 1

I had the same issue in my application, and my solution was configure it in the HttpSecurity. The code is:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {

        CorsConfiguration corsConfiguration = new CorsConfiguration().applyPermitDefaultValues();
        corsConfiguration.addAllowedMethod("*");
        httpSecurity
            .authorizeRequests()
            .antMatchers("/**").permitAll()
            .anyRequest().permitAll()
            .and()
            .cors().configurationSource(request -> corsConfiguration)
            .and()
            .csrf().disable();
    }

}