TypeError: Cannot read properties of undefined (reading 'protocol') at isURLSameOrigin (isURLSameOrigin.js:57:1) in react.js

Question

I was trying to get products from the database with this method, I got all the 4 logs printed in the console 1.calling the try block 2.calling axios ... 4. request resolved but the products from db was not shown on the screen.

const Products = ({ category, filters, sort }) => {
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    const getProducts = async () => {
      console.log("calling the try block");
      try {
        console.log("calling axios");
        const res = await axios.post(
          console.log("request for getting data recieved"),
          category
            ? `http://localhost:5000/api/products/?category=${category}`
            : "http://localhost:5000/api/products/",
          console.log("request resolved")
        );
        setProducts(res.data);
      } catch (err) {
        console.log(err)
      }
    };
    getProducts();
  }, [category]);



useEffect(() => {
    category &&
      setFilteredProducts(
        products.filter((item) =>
          Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
          )
        )
      );
  }, [products, category, filters]);

  return (
    <Container>
      {filteredProducts.map((item) => (
        <Product item={item} key={item.id} />
      ))}
    </Container>
  );
};

Instead of the result all I could see(in the console) after the 4 logs I already mentioned was

TypeError: Cannot read properties of undefined (reading 'protocol')
    at isURLSameOrigin (isURLSameOrigin.js:57:1)
    at dispatchXhrRequest (xhr.js:147:1)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js:16:1)
    at dispatchRequest (dispatchRequest.js:58:1)
    at Axios.request (Axios.js:109:1)
    at Axios.httpMethod [as post] (Axios.js:144:1)
    at Function.wrap [as post] (bind.js:9:1)
    at getProducts (Products.jsx:23:1)
    at Products.jsx:35:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at react-dom.development.js:23324:1
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

I actually am using axios for first time and stuck here, please help

I also has the following error printed on my console,

index.js:1 Warning: Failed prop type: Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.
    at Badge (http://localhost:3000/static/js/vendors~main.chunk.js:4895:35)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:181340:31)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at Navbar
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at ProductList (http://localhost:3000/static/js/main.chunk.js:4146:88)
    at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:336653:5)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:336586:15)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:335393:5)
    at App

could this be any reason for the issue?

Am getting the below issues

Screenshot of the errors on console

Answer 1

You cannot have a console.log as your first argument and last argument to axios.post call. Refer https://axios-http.com/docs/post_example

Ideally you should also construct your request URL before the axios call.

const url = category
  ? `http://localhost:5000/api/products/?category=${category}`
  : "http://localhost:5000/api/products/";
const res = await axios.post(url);