Axios 未发送授权 header - ReactJS

Question

我在 axios GET 请求中设置授权 header 时遇到问题。我做了很多研究，但没有找到解决方案。我还检查了 CORS 设置，它应该没问题，请求正在从 postman 或 advance rest 客户端工作，所以我不认为那是服务器端的问题。

我的函数与 axios 请求

export function getUserInfo (userId) {
  return function (dispatch) {
   axios.get(`${ROOT_URL}/user/${userId}`, helperMethods.authorizedHeader())
    .then(response => {
      dispatch({type: USER_INFO, payload: response.data.message});
    })
    .catch(error => {
      console.log('something went wrong: ', error);
    });
  };
}

Helper 方法（返回有效 object，我调试了它）

export function authorizedHeader () {
  let token = sessionStorage.getItem(TOKEN);
  if (!token) {
    token = localStorage.getItem(TOKEN);
  }
  return {
    headers: {
    'Accept': 'application/json',
    'Authorization': `${token}`
  }
 };
}

和 CORS 设置：

@Bean
public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
}

因此，如果您有任何建议，请与我分享。

谢谢

Answer 1

终于找到问题了。问题出在服务器端的 CORS 配置上。当请求被触发时，它首先进入 spring CORS 过滤器，它拒绝请求，它永远不会触发我的 CORS 过滤器。所以我必须设置触发顺序，像这样：

FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(-110);

这里是整个更新的 CORS 配置：

@Bean
public FilterRegistrationBean platformCorsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

    CorsConfiguration configAutenticacao = new CorsConfiguration();
    configAutenticacao.setAllowCredentials(true);
    configAutenticacao.addAllowedOrigin("*");
    configAutenticacao.addAllowedHeader("Authorization");
    configAutenticacao.addAllowedHeader("Content-Type");
    configAutenticacao.addAllowedHeader("Accept");
    configAutenticacao.addAllowedMethod("POST");
    configAutenticacao.addAllowedMethod("GET");
    configAutenticacao.addAllowedMethod("DELETE");
    configAutenticacao.addAllowedMethod("PUT");
    configAutenticacao.addAllowedMethod("OPTIONS");
    configAutenticacao.setMaxAge(3600L);
    source.registerCorsConfiguration("/**", configAutenticacao);

    FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(-110);
    return bean;
}

Axios 未发送授权 header - ReactJS

Axios not sending authorization header - ReactJS

reactjs

spring-boot

axios