MERN栈应用中PUT/PATCH请求Token未定义问题求助

问题根源 #

你在使用axios.put时参数顺序错误。Axios的PUT/PATCH方法签名为axios.put(url[, data[, config]])，你直接把配置对象作为第二个参数传递，但第二个参数应该是请求体数据，这导致请求头没有被正确附加到请求中，后端自然获取不到Authorization Token。

修正后的前端Action代码 #

export const approveClient = (id) => async (dispatch) => {
  try {
    const config = {
      headers: {
        Authorization: `${localStorage.getItem("token")}`,
      },
    };
    dispatch({ type: adminConstants.APPROVECLIENT_REQUEST });
    // 若无需请求体数据，传递空对象作为第二个参数，再传入配置对象
    const res = await axios.put(`/admin/approveClient/${id}`, {}, config);
    dispatch({
      type: adminConstants.APPROVECLIENT_SUCCESS,
      payload: res.data,
    });
  } catch (error) {
    dispatch({
      type: adminConstants.APPROVECLIENT_FAIL,
      payload: error.response.data,
    });
  }
};

补充说明 #

• GET/DELETE请求正常是因为它们的Axios方法签名不同：axios.get(url[, config])、axios.delete(url[, config])，你之前的写法刚好匹配这些方法的参数顺序，所以请求头能正确传递。
• Postman调用正常是因为你手动正确设置了Authorization头，不受前端代码参数顺序错误的影响。

内容的提问来源于stack exchange，提问作者Ahmed Hassan