为何携带populate=*参数时Axios请求返回404 Not Found错误？

问题说明 #

在React应用中使用Axios向API发送GET请求，当URL包含查询参数populate=*时，始终返回404 Not Found错误；移除该参数后请求可正常执行，但无法获取图片详情。

错误信息：

Failed to load resource: the server responded with a status of 404 (Not Found) :1337/api/categories/populate=*

问题代码 #

Home.jsx #

import { FetchDataFromApi } from "../../utils/api";
import { useEffect } from "react";

const Home = () => {
  useEffect(()=>{
    getCategory();
  })
  const getCategory = ()=>{
    FetchDataFromApi("/api/categories/populate=*").then((res)=>{
      console.log(res);
    })
  }
  return (...)
}
export default Home

api.js #

import axios from "axios";

const params = {
    headers:{
        Authorization: "bearer " + "myApiToken"
    }
}

export const FetchDataFromApi = async(url)=>{
    try{
        const {data} = await axios.get("http://localhost:1337" + url, params)
        return data;
    }catch (err){
        console.log(err);
        return err;
    }
}

解决步骤 #

1. 修正查询参数拼接方式
   populate=*是URL查询参数，必须用?与路径分隔，而非直接作为路径的一部分。修改Home.jsx中的请求URL：

// 错误写法
FetchDataFromApi("/api/categories/populate=*")

// 正确写法
FetchDataFromApi("/api/categories?populate=*")

2. 优化useEffect避免重复请求
   给useEffect添加空依赖数组，防止组件重复渲染时多次发起请求：

useEffect(()=>{
  getCategory();
}, []) // 添加空数组作为依赖

补充说明 #

API的查询参数需遵循REST规范，查询参数必须以?开头，多参数用&分隔（例如?populate=*&sort=id:desc）。直接将参数拼入路径会被识别为不存在的API端点，从而触发404错误。

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