fetch() does not send headers when adding spring security module?

Question

I've recently added Spring security to my project ( react apollo graphQl / springboot ) , and it seems like I cant send headers ?? I assume It's CORS.

my code REACT using apollo-client :

const httpLink = new HttpLink({ uri: 'http://localhost:8080/graphql' });
const authLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
       'Content-Type': 'application/json',
       'Authorization': `Bearer ${token}`
    }
  });
      return forward(operation);
    });

export const clientBackEnd = new ApolloClient({
  link: authLink.concat(httpLink), 
  cache: new InMemoryCache()
});

spring security config :

 @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
         httpSecurity.csrf().disable()
                .authorizeRequests().antMatchers("/authenticate").permitAll().
                anyRequest().authenticated().and().sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        httpSecurity.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
    }

Cors config :

public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/graphql").allowedOrigins("http://localhost:3000", "http://localhost:3001");
            }
        };
    }
}

devtools:

it looks like the headers are not even sent !?

can some figure out this issue! What am I doing wrong ?

are you getting the cors issue ? is the client running port is 3000, try with * and check whether is it working. Basically you need to whitelist as in your code you are adding allowedOrigins try with * and check whether its working — Learner, Jan 02 '20 at 15:06
yeah : Access to fetch at 'http://localhost:8080/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status. Yeah it's running on 3000 , and I've just tryed with * still the same error — Kaoutar Bella, Jan 02 '20 at 15:13
there are cors extensions can you install and try with it, the preflight mode is for basically the security purposes — Learner, Jan 02 '20 at 15:18
I tried Access-Control-Allow-Origin Chrome extension , still the same error . I even tried changing the browser from chrome to Firefox to same error . — Kaoutar Bella, Jan 02 '20 at 15:26
Its not about the browser issue, its basically the allow orgins in server side we need to whitelisit the domains where the request will be comming — Learner, Jan 02 '20 at 15:28
Yes indeed you are right, the problem was on my security config I had to set response to go through the Cors hers : https://stackoverflow.com/questions/40418441/spring-security-cors-filter . Thanks DILEEP THOMAS for your help and replying so fast. For the browser, Chrome does not support localhost to go through the Access-Control-Allow-Origin that's why I've tried Firefox. — Kaoutar Bella, Jan 03 '20 at 07:55
Cools, happy to help. I have added an answer with the discussed things so it will be helpful for others to resolve issue, Kindly update if i missed any info — Learner, Jan 03 '20 at 08:34

score 0 · Accepted Answer · answered Jan 03 '20 at 08:33

As discussed on further comments the issue was based of whitelisting the origin where the request is generating.

So the issue is basically that - We need to allow origins in server side by whitelisting the domains where the request will be coming or originating

So here client runs in 3000 so when it is asking for data we need to whitelist that port and give the response back

for whitelisting and avoiding the cors issue refer here

fetch() does not send headers when adding spring security module?

1 Answers1