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

I’m trying to make a GET request to an API endpoint using Axios in my React application. When I include the query parameter ‘populate=*’ in the URL, I consistently receive a 404 Not Found error. However, when I remove this parameter, the request works fine, but then I am not able to get the details of image. someone’s code that I am following works though.

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

>Solution :

The query parameters are seperated by ? symbol, not /. So you need to write down as following.

    FetchDataFromApi("/api/categories?populate=*").then((res)=>{
      console.log(res);
    })

"If your request has many query parameters, you have to connect them with the & symbol. You can determine the sequence of query parameters in your mind.

    FetchDataFromApi("/api/categories?populate=*&city=abc&other=other").then((res)=>{
      console.log(res);
    })