I make the simple interceptors use axios:
import axios from "axios";
const $api = axios.create({
withCredentials: true,
baseURL: "http://localhost:9000/api",
});
$api.interceptors.request.use((config) => {
config.headers.Authorization = `Bearer ${localStorage.getItem("accessToken")}`;
console.log("The config from $api.interceptors.request:", config)
return config;
});
export default $api;
Next create the custom hook for save accessToken and user data for paylod in dispatch:
import { useState } from "react";
import { useAutnContex } from "./useAuthContext";
import actions from "../../actions/AuthActions";
import $api from "../../http";
export const useLogin = () => {
const [error, setError]: any = useState(null);
const [isLoading, setIsLoading]: any = useState(null);
const { dispatch }: any = useAutnContex();
const login = async (email: string, password: string) => {
setIsLoading(true);
try {
const response = await $api.post("/admin/login", { email, password });
localStorage.setItem("accessToken", response.data.accessToken);
localStorage.setItem("user", JSON.stringify(response.data.user));
dispatch({
type: actions.LOGIN,
payload: response.data.user
});
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
console.log(error);
}
};
return { login, isLoading, error };
};
and finish I call this function from my form handler:
const handleSubmit = async (event: any) => {
await login(form.values.email, form.values.password);
};
all these actions I do for my endpoint ( for login user ). When I use postman for this endpoint http://localhost:9000/api/admin/login everythin is working, but when I connect it to front-end part I get
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
and also I make console.log("The config from $api.interceptors.request:", config) and config.headers.Authorization is Bearer null
How I can solve this problem or maybe I miss something. Thank you very much
2
Answers
What browser do you use? If you’re using Firefox, try going to the about:config page and attempt to change some settings. Specifically, set
network.fetch.redirect.stripAuthHeader
andnetwork.http.redirect.stripAuthHeader
tofalse
.Alternatively, you can change the header name from ‘Authorization’ to ‘Token
Reference:
Github Issues
You need to skip the Authorization header for login request "/admin/login" in axios interceptor.
Your logs says clearly "config.headers.Authorization is Bearer null" which means your local storage does not have any token. Only after login you will have the token.