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

Я защитил свои конечные точки 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));

Весенняя безопасность: Фильтр токенов:

@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);

    }
}

Конфигурация:


    @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);
    }
}

Любая идея, в чем именно заключается проблема и как ее решить?

Я столкнулся с точно такой же проблемой, с Postman работает хорошо, но в ReactJS/Axios Authorization никогда не отправляется.

Francisco Souza 24.09.2019 16:55
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
1
969
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

            return null;
        }

вызов аксиом

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

Другие вопросы по теме