我无法返回（获取）前面的“Authorization”标头/授权字段返回未定义 - React - Redux -

Question

登录我的应用程序时，标头内的授权返回未定义

在此输入图片描述

但是，在“网络”中的开发人员工具中检查时，令牌位于标头的授权字段中

在此输入图片描述

有人知道这会是什么吗？我做了一些更改，例如后来仅使用 redux 与 axios 结合使用，但没有成功。

我的store.js

import { AuthReducer } from "../Auth/Reducer";
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import logger from "redux-logger";

const rootReducers = combineReducers({
  auth: AuthReducer,
});

export const store = configureStore({
  reducer: rootReducers,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
});

我的action.js

import axios from "axios";

const ROOT_URL = "http://localhost:8080";

export const signinAction = (data) => async (dispatch) => {
  try {
    const response = await axios.get(`${ROOT_URL}/signin`, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        Authorization: "Basic " + btoa(data.email + ":" + data.password),
      },
    });

    if (response.status === 200) {
      const authorizationHeader = response.headers.authorization;
      console.log(authorizationHeader);
    } else {
      throw new Error("Falha ao fazer login");
    }
  } catch (error) {
    console.error("Erro:", error.message);
  }
};

我的Reducer.js

import { SIGN_IN, SIGN_UP } from "./ActionType";

const initialValue = {
  signup: null,
  signin: null,
};
export const AuthReducer = (store = initialValue, { type, payload }) => {
  if (type === SIGN_IN) {
    return { ...store, signin: payload };
  } else if (type === SIGN_UP) {
    return { ...store, signup: payload };
  }
  return store;
};

我在Signin.jsx中的调度

const dispatch = useDispatch();
  const handleSubmit = (values, actions) => {
    dispatch(signinAction(values));
    actions.setSubmitting(false);
  };

我的 CORS 配置

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req;
    Map<String, String> map = new HashMap<>();
    String originHeader = request.getHeader("origin");
    response.setHeader("Access-Control-Allow-Origin", originHeader);
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
    response.setHeader("Access-Control-Max-Age", "3000");
    response.setHeader("Access-Control-Allow-Headers", "*");

    if ("OPTIONS".equalsIgnoreCase(request.getMethod())){
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        filterChain.doFilter(req, res);
    }
}

我在后端的呼叫登录

@GetMapping("/signin")
public ResponseEntity<User> signInHandler(Authentication auth) throws BadCredentialsException {
    Optional<User> optionalUser = userRepository.findByEmail(auth.getName());

    if (optionalUser.isPresent()) {
        return new ResponseEntity<>(optionalUser.get(), HttpStatus.OK);
    }
    throw new BadCredentialsException("Invalid username or password");
}

并且希望我能获得授权值

Answer 1

我通过添加解决了这个问题

    response.setHeader("Access-Control-Expose-Headers", "Authorization");

在CORS doFilter方法中

@Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        Map<String, String> map = new HashMap<>();
        String originHeader = request.getHeader("origin");
        response.setHeader("Access-Control-Allow-Origin", originHeader);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3000");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Expose-Headers", "Authorization");


        if ("OPTIONS".equalsIgnoreCase(request.getMethod())){
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(req, res);
        }
    }