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

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 ?

Answer 1

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