Как отправить токен jwt в Spring Security с помощью ReactJs?

Question

Я защитил свои конечные точки API моего приложения Spring Boot с помощью Spring Security.

При входе в систему я генерирую новый токен jwt и отправляю его пользователю.

При запросе данных я ожидаю, что пользователь отправит токен в заголовке.

Если я делаю это с помощью почтальона, он отлично работает. Когда я пытаюсь отправить токен с помощью React, он выходит из строя (axios / fetch / superagent). Проблема заключается не в представлении самого токена, потому что, если я отключаю авторизацию, я могу прочитать заголовок авторизации с контроллера.

Вместо этого Spring Security почему-то не распознает заголовок, когда он отправляется через React.

Я попытался добавить другой настраиваемый заголовок, чтобы увидеть, позволяет ли Spring это сделать, но этот настраиваемый заголовок также «заблокирован».

Реагировать:

axios(apiTest, {
      async: true,
      crossDomain: true,
      method: "GET",
      headers: {
        Authorization: `Bearer ${this.props.token}`,
        TestHeader: "RandomValue",
        Accept: "*/*"
      },
      processData: false,
      data: ""
    })
      .then(res => {
        if (res.data !== undefined) {
          console.log(res.data);
        }
      })
      .catch(err => console.error(error));

Spring Security: Фильтр токенов:

@Component
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {

    @Value("${jwt.header}")
    private String tokenHeader;

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
            throws ServletException, IOException {
                //Usual Authorization header (is null with React-use)
                final String requestHeader = request.getHeader(this.tokenHeader);
                //Custom header (null)
                System.out.println("Test Header: " + request.getHeader("TestHeader"));
        if (requestHeader != null && requestHeader.startsWith("Bearer ")) {
            String authToken = requestHeader.substring(7);
            JwtAuthentication authentication = new JwtAuthentication(authToken);
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }
        chain.doFilter(request, response);

    }
}

Config:

    @Configuration
    @EnableWebSecurity
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private JwtAuthenticationEntryPoint unauthorizedHandler;

    @Autowired
    private JwtAuthenticationProvider jwtAuthenticationProvider;

    @Autowired
    public void configureAuthentication(AuthenticationManagerBuilder authenticationManagerBuilder) {
                authenticationManagerBuilder.authenticationProvider(jwtAuthenticationProvider);
    }

    @Bean
    CorsFilter corsFilter() {
        CorsFilter filter = new CorsFilter();
        return filter;
    }

    @Bean
    public JwtAuthenticationTokenFilter authenticationTokenFilterBean() {
        return new JwtAuthenticationTokenFilter();
    }

    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.addFilterBefore(corsFilter(), SessionManagementFilter.class).csrf().disable().authorizeRequests()
                .antMatchers("/Login").permitAll().antMatchers("/CloseConnection**").permitAll()
                .antMatchers(HttpMethod.OPTIONS, "**").permitAll().anyRequest().authenticated().and()
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler);
    }
}

Есть идеи, что это за проблема и как ее решить?

Answer 1

Попробуйте это у меня сработало

   private String getToken(HttpServletRequest request) {
            String header = request.getHeader("Authorization");     
            if (header != null && header.startsWith("Bearer ")) {
                return authHeader.replace("Bearer ","");
            }

            return null;
        }

Axios Call

axios.post(url,{
     "data": 'sample',
    },
    {
      headers: {
      'Authorization':'Bearer '+token,
      'Content-Type':'application/json'
      }
    })
    .then((res) => {
      console.log(res);
    })