React - can't set headers with axios

Question

I'm currently making a express --> react api. I can't set header with jwt token, I think I've tried any method I could find. Could it be related to CORS settings?

Redux action

  return (dispatch) => {
    return instance.post("/login", userData).then((res) => {
      const token = res.data.accessToken;

      localStorage.setItem("token", token);

      instance.interceptors.request.use(
        (config) => {
          const token = localStorage.getItem("token");
          const auth = token ? `Bearer ${token}` : "";
          config.headers.common["Authorization"] = auth;
          return config;
        },
        (error) => Promise.reject(error)
      );

      // setAuthorizationToken(token);
    });
  };
};

Token correctly lands in localstorage.

Global axios settings

var instance = axios.create({
  baseURL: "http://localhost:4000",
  withCredentials: true,
});

Cors settings on the server side.

  app.use(
    cors({
      credentials: true,
      allowedHeaders: "Content-Type, Authorization",
      exposedHeaders: "Authorization",
      origin:
        process.env.NODE_ENV === "development"
          ? "http://localhost:3000"
          : (process.env.FRONTEND_HOST as string),
    })
  );

Any ideas?

eminsh eminsh · Accepted Answer · 2021-04-23T21:18:53

If it is a CORS problem, you can see it in browser console. Try this. In your global axios settings

const instance = axios.create({
    baseURL: "http://localhost:4000",
    headers: {
        Authorization: `Bearer ` + localStorage.getItem("token"),
    },
    responseType: "json",
});

instance.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem("token");
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

export default instance;

Redux Action

  return (dispatch) => {
    return instance.post("/login", userData).then((res) => {
      const token = res.data.accessToken;
      localStorage.setItem("token", token);
      
      // dispatch action here
      
    });
  };
};

React - can't set headers with axios

1 Answers