I’m building an ecommerce website with React and Strapi. When I try to get the products and categories from Strapi this error pops up:

GET http://localhost:3000/undefined/api/products?populate=* 404 (Not Found)

GET http://localhost:3000/undefined/api/categories?populate=* 404 (Not Found)

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST'

This is the code from the api.js

import axios from "axios";

const params = {
  headers: {
    "Authorization": "bearer " + process.env.REACT_APP_STRIPE_DEV_APP_KEY,
  },
};

export const fetchDataFromApi = async (url) => {
  try {
    const { data } = await axios.get(
      process.env.REACT_APP_STRIPE_APP_DEV_URL + url,
      params
    );
    return data;
  } catch (err) {
    console.log(err);
    return err;
  }
};

I’ve generated the token multiple time thinking it could be an error while copy-pasting. And also, I’ve checked Strapi documentation looking for answers.

>Solution :

Something in your URL is undefined, look at the request :

GET http://localhost:3000/ undefined /api/products?populate=* 404 (Not Found)

It should not be undefined

You should console.log your url to fix it.

Best,
Eric