Ruby on Rails在React中通过axios请求时不会在头上包含Authorization token，但它可以与Postman一起使用

Question

我目前正在开发一个后端API，使用Ruby on Rails、Devise和Devise-JWT，在前端客户端使用NextJS，使用axios处理请求。我一直试图从头部访问Authorization令牌(一旦用户登录)，然后将令牌存储到localhost中，但它不在请求的头部中。尽管如此，post login请求在Postman上测试时确实在报头上提供了Auth。我遗漏了什么？提前感谢！

Answer 1

查看您为前端实现的Axios用户身份验证的代码会很有帮助。

但这可能会有所帮助。

//---------- Reducer -----------
// In your reducer
const authReducer = (state, { type, payload }) => {
  switch (type) {
    case 'LOGIN': {
      localStorage.setItem('authToken', JSON.stringify(payload.auth_token));
      localStorage.setItem('authEmail', JSON.stringify(payload.email));
      return {
        authToken: payload.auth_token,
        authEmail: payload.email,
      };
    }
    case 'YOUROTHER': {
      return {  };
    }
    default: {
      
    }
  }
};

export default authReducer;
//-------------------------------

//---------- Contexts -----------
// In your Contexts auth.js file
import authReducer from '../reducers/auth';

const AuthStateContext = React.createContext();
const AuthDispatchContext = React.createContext();

const token = JSON.parse(localStorage.getItem('authToken'));
const email = JSON.parse(localStorage.getItem('authEmail'));
const initialState = {
  isLoggedIn: !!token,
  authToken: token ? token : null,
  authEmail: email ? email : null,
};

const AuthProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(authReducer, initialState);
  return (
    <AuthStateContext.Provider value={state}>
      <AuthDispatchContext.Provider value={dispatch}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
};
//-------------------------------

//--------- App.js file ---------
// Then wrap the App.js like:
import { AuthProvider } from './contexts/auth';

function App(props) {
  return (
    <AuthProvider>
      <Main {...props} />
    </AuthProvider>
  );
}
//-------------------------------

//------- Your Login Component -------
// Imports
import { useAuthDispatch } from '../../contexts/auth';

// Axios handler 
const baseUrl = 'http://localhost:3001/';
const login = payload => axios.post(`${baseUrl}api/v1/login`, payload);
const authApi = {
  login,
};

// Auth Header Function
const setAuthHeaders = () => {
  // axios request try this
  axios.defaults.headers = {
    Accept: 'applicaion/json',
    'Content-Type': 'application/json',
  };
  const token = JSON.parse(localStorage.getItem('authToken'));
  const email = JSON.parse(localStorage.getItem('authEmail'));
  //Add token & email to axios header
  if (token && email) {
    axios.defaults.headers['X-Auth-Email'] = email;
    axios.defaults.headers['X-Auth-Token'] = token;
  }
};

// Login 
const Login = () => {
  const [initialValues, setInitialValues] = useState({
    email: '',
    password: '',
  });
  
  const authDispatch = useAuthDispatch();
  //const userDispatch = useUserDispatch();

  const handleLogin = async values => {
    const { /*eg. email, password*/ } = values;
    try {
      const {
        data: { user, /* should include:*/ auth_token },
      } = await authApi.login({ user: { email, password } });
      // your dispatch with payload: auth_token
      authDispatch({ type: 'LOGIN', payload: { auth_token, email } }); // passing the token & email via Dispatch
      // The user: { email, password } comes from the userDispatch
      setAuthHeaders(); // Auth Header Func
    } catch (error) {
      
    };

    return (
      <>
        {/* your jsx code */}
      </>
    );
  }
};

export default Login;

//--- # Your Login Component ---

Answer 2

在机架一致性配置中使用以下命令公开授权标头：expose : ['Authorization']：

Rails.application.config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options, :patch, :delete], expose: ['Authorization']
  end
end

https://glaucocustodio.github.io/2016/01/20/dont-forget-to-expose-headers-when-using-rack-cors/