React Native中Axios GET请求带参数与授权头报401/415错误排查

我用Axios发请求时碰到两个错误，具体情况：

第一次尝试的代码 #

export async function getDishes() {
  const url = DishesAuthURL;

  const userToken = newUser.getToken();

  const authStr = "Bearer ".concat(userToken);
  console.log("🚀 ~ file: menu.js:108 ~ getDishes ~ authStr", authStr);

  const response = await axios
    .get(
      url,
      {
        params: {
          categoryId: 1,
        },
      },
      { headers: { Authorization: authStr } }
    )
    .catch((error) => {
      console.log("🟥 ~ file: menu.js:108 ~ getDishes ~ error", error);
    });
  console.log("🚀 ~ file: menu.js:112 ~ getDishes ~ response", response);
}

返回错误：[AxiosError: Request failed with status code 401]，但我100%确认令牌有效，Postman测试完全正常。

第二次尝试的代码 #

调整了headers和params的顺序：

export async function getDishes() {
  const url = DishesAuthURL;

  const userToken = newUser.getToken();

  const authStr = "Bearer ".concat(userToken);
  console.log("🚀 ~ file: menu.js:108 ~ getDishes ~ authStr", authStr);

  const response = await axios
    .get(
      url,
      { headers: { Authorization: authStr } },
      {
        params: {
          categoryId: 1,
        },
      }
    )
    .catch((error) => {
      console.log("🟥 ~ file: menu.js:108 ~ getDishes ~ error", error);
    });
  console.log("🚀 ~ file: menu.js:112 ~ getDishes ~ response", response);
}

返回错误：[AxiosError: Request failed with status code 415]。

我试过用data、config替换params，问题还是没解决。我的需求是：设置Authorization: Bearer ${userToken}请求头，同时把categoryId作为参数放在请求体里。

你犯的核心错误是Axios请求参数格式不对——Axios的get方法只接受两个参数：第一个是请求URL，第二个是包含所有配置的单个对象，你之前把params和headers拆成两个独立对象传入，导致配置没被正确识别，这才引发了后续的错误。

另外要注意：标准HTTP GET请求一般不带请求体，很多后端也不支持这种用法。如果Postman里你是用POST请求发的请求体，那代码里也得用axios.post；如果Postman里是把categoryId作为URL查询参数，那用params才是对的。

场景1：后端确实要求GET带请求体（非常规） #

如果后端明确支持GET请求携带请求体，按下面的写法调整，把headers和data合并到同一个配置对象里：

export async function getDishes() {
  const url = DishesAuthURL;
  const userToken = newUser.getToken();
  const authStr = `Bearer ${userToken}`;
  
  console.log("🚀 ~ getDishes ~ authStr", authStr);

  try {
    const response = await axios.get(url, {
      headers: { Authorization: authStr },
      data: { categoryId: 1 } // GET带请求体是非标准用法，需后端支持
    });
    console.log("🚀 ~ getDishes ~ response", response);
    return response;
  } catch (error) {
    console.log("🟥 ~ getDishes ~ error", error);
    throw error;
  }
}

场景2：后端要求用POST请求（符合REST规范，推荐） #

如果Postman里你实际用的是POST请求，把categoryId放在请求体里，那代码改成axios.post，注意POST的参数顺序是URL、请求体、配置对象：

export async function getDishes() {
  const url = DishesAuthURL;
  const userToken = newUser.getToken();
  const authStr = `Bearer ${userToken}`;
  
  console.log("🚀 ~ getDishes ~ authStr", authStr);

  try {
    const response = await axios.post(
      url,
      { categoryId: 1 }, // 请求体数据
      { headers: { Authorization: authStr } } // 包含headers的配置
    );
    console.log("🚀 ~ getDishes ~ response", response);
    return response;
  } catch (error) {
    console.log("🟥 ~ getDishes ~ error", error);
    throw error;
  }
}

场景3：categoryId是URL查询参数 #

如果Postman里你是把categoryId作为URL查询参数（比如xxx.com/dishes?categoryId=1），那用params是正确的，只需合并配置：

export async function getDishes() {
  const url = DishesAuthURL;
  const userToken = newUser.getToken();
  const authStr = `Bearer ${userToken}`;
  
  console.log("🚀 ~ getDishes ~ authStr", authStr);

  try {
    const response = await axios.get(url, {
      headers: { Authorization: authStr },
      params: { categoryId: 1 } // 自动拼到URL后的查询参数
    });
    console.log("🚀 ~ getDishes ~ response", response);
    return response;
  } catch (error) {
    console.log("🟥 ~ getDishes ~ error", error);
    throw error;
  }
}

关键提醒 #

• Axios请求方法的参数格式要严格遵守：
  • GET：axios.get(url, 单个配置对象)
  • POST：axios.post(url, 请求体数据, 单个配置对象)
• 别拆分配置对象，把headers、params、data等都放在同一个配置对象里（POST的话请求体是第二个参数，配置是第三个）。
• 之前的401错误是因为headers没被正确设置，Axios根本没带上你的Authorization头；415错误是参数格式错了，导致请求体类型不被后端识别。

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