当axios在React中请求时，Ruby on Rails不包括头部的授权令牌，但它可以与Postman一起工作.&l

Question

我目前正在使用Ruby on Rails，设计和设计一个后端API - jwt，在前端客户端使用NextJS，使用axios进行请求。我一直试图从头部访问授权令牌(一旦用户登录)，然后将令牌存储到localhost，但它没有在请求的头部内。但是，post登录请求在对Postman进行测试时确实提供了报头上的验证。我错过了什么?提前感谢!

Answer 1

使用这个: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/

Answer 2

查看您为前端实现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 ---