React - 无法使用 axios 设置 headers

Question

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

Redux 动作

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

有什么想法吗？

Answer 1

如果是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;

Redux 动作

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

React - 无法使用 axios 设置 headers

React - can't set headers with axios

http-headers

express

reactjs

redux

axios