如何使用ReactJs向Spring Security提交jwt令牌？

Question

我已经用Spring Security保护了Spring Boot应用程序的APIendpoint。

登录时，我生成一个新的jwt令牌并将其提交给用户。

对于数据请求，我希望用户在头中提交令牌。

如果我这样做使用邮递员，它的工作完美罚款。当我试图用React发送令牌时，它失败了（axios/finch/超级代理）。问题不在于令牌本身的提交，因为如果我禁用授权，我可以用控制器读取授权头。

相反，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);

    }
}

配置：

    @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呼叫

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