Spring Boot / React blocks CORS

Question

I've got an api configured with Spring Boot on my localhost. My Spring Boot controller should allow CORS requests, as I'm working with @CrossOrigin:

@RestController
@CrossOrigin
@RequestMapping("/api")
public class imageController {
    @GetMapping("/images")
    public List<Image> findAll(){
        return imageService.findAll();
    }
}

When testing with Postman / cURL everything is working fine (but cURL doesn't care about CORS policies...). Now I'm trying to access the ressource 'http://localhost:8081/api/images' from my React application with axios. I get following response-header, which determines that the request was blocked because of CORS (see 'X-XSS-Protection').

Cache-Control
    no-cache, no-store, max-age=0, must-revalidate
Connection
    keep-alive
Date
    Tue, 23 Mar 2021 11:10:54 GMT
Expires
    0
Keep-Alive
    timeout=60
Pragma
    no-cache
Set-Cookie
    JSESSIONID=0683F0AD7647F9F148C9C2D4CED8AFE6; Path=/; HttpOnly
Transfer-Encoding
    chunked
Vary
    Origin
Vary
    Access-Control-Request-Method
Vary
    Access-Control-Request-Headers
WWW-Authenticate
    Bearer realm="Unknown"
X-Content-Type-Options
    nosniff
X-Frame-Options
    DENY
X-XSS-Protection
    1; mode=block

My axios request looks like this:

function findAll() {
    return instance.get('/api/images')
}

const instance = axios.create({
    baseURL: `${config.API_BASE_URL}`,
    headers: {
        'Content-Type': 'application/json'
    }
})

instance.interceptors.request.use(request => {
    console.log('Starting Request', JSON.stringify(request, null, 2))
    return request
})

instance.interceptors.response.use(response => {
    console.log('Response:', JSON.stringify(response, null, 2))
    return response
})

...and it's called by following code:

    componentDidMount() {
        this.setState({ isLoading: true })
        ImageService.authToken(keycloak.token)
        ImageService.findAll().then((res) => {
            this.setState({ images: res.data, isLoading: false });
        });
    }

How do I configure Spring Boot to allow such requests and not blocking my request by CORS policies?

Note, that my application is secured by keycloak. But I dont think the configuration of keycloak is relevant for this case. Please let me know if you need the Spring Boot configuration of keycloak.

isa_toltar · Accepted Answer · 2021-03-23 12:07:47Z

1

Hi you need to create a global cors configuration in your spring boot project.Create a class and annotate it with @Configuration. You can follow this example below.

@Configuration
public class MyConfiguration {

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/api/**")
              .allowedOrigins("http://domain2.com")
              .allowedMethods("PUT", "DELETE")
              .allowedHeaders("header1", "header2", "header3")
              .exposedHeaders("header1", "header2")
              .allowCredentials(false).maxAge(3600);
        }
    };
  }
}

Here is the full guide that spring framework provides https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

answered Mar 23, 2021 at 12:07

isa_toltar

5946 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kimakunc · Accepted Answer · 2021-03-23 12:41:02Z

Do you maybe have a Spring security configuration (@EnableWebSecurity / @EnableSpringSecurity) in place that may be interfering ? If so, you could configure cors() there as well.

@Configuration
@EnableWebSecurity
@EnableSpringSecurity
class WebSecurityConfiguration(...)


  override fun configure(http: HttpSecurity) {
        http.cors().configurationSource {
                CorsConfiguration().apply {
                    allowedOrigins = listOf("*")
                    allowedMethods = listOf("GET", "OPTIONS")
                    allowedHeaders = listOf("*")
                }
            }

Also see https://docs.spring.io/spring-security/site/docs/4.2.19.BUILD-SNAPSHOT/reference/html/cors.html

Collectives™ on Stack Overflow

Spring Boot / React blocks CORS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related