时间戳

首页 > 解决方案 > React - 无法使用 axios 设置标题

reactjs - React - 无法使用 axios 设置标题

问题描述

我目前正在制作快递-> react api。我无法使用 jwt 令牌设置标题，我想我已经尝试了我能找到的任何方法。它可能与CORS设置有关吗？

还原动作

  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);
    });
  };
};

令牌正确地落在本地存储中。

全局 axios 设置

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

服务器端的 Cors 设置。

  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),
    })
  );

有任何想法吗？

标签： reactjsexpressreduxaxioshttp-headers

解决方案

如果是 CORS 问题，您可以在浏览器控制台中查看。尝试这个。在您的全局 axios 设置中

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;

还原动作

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

推荐阅读