React axios请求报错 无法读取undefined的protocol属性

通过代码从数据库获取商品数据时，控制台成功打印全部4条预设日志：1.calling the try block 2.calling axios ... 4. request resolved，但数据库返回的商品数据始终未在页面展示。
对应业务代码如下：

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

日志打印完成后，控制台未返回预期接口数据，抛出如下错误：

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)

控制台同时输出Material-UI相关警告：

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

需确认该警告是否为请求报错的诱因。

• 核心问题是axios.post参数传参顺序错误。axios.post的参数规范为axios.post(url, requestData, config)，代码中将console.log语句作为第一个参数（url位置）传入，实际接口地址被放到了第二个参数（请求体位置），第三个参数传入的是console.log的返回值undefined，axios无法读取到合法的请求url，因此抛出Cannot read properties of undefined (reading 'protocol')错误。
• 4条日志全部打印属于正常现象：console.log是同步执行语句，会在axios真正发起网络请求前全部执行完成，不代表请求发送成功。
• Material-UI的overlap属性废弃警告和本次请求报错无任何关联，仅为组件属性写法过时的提示，不会阻断接口请求逻辑。

调整axios调用代码，不要将console.log写在axios参数列表内，按参数顺序正确传值：

console.log("calling axios");
console.log("request for getting data recieved");
// 获取商品列表无提交数据的场景，更推荐使用axios.get
const res = await axios.get(
  category
    ? `http://localhost:5000/api/products/?category=${category}`
    : "http://localhost:5000/api/products/"
);
console.log("request resolved");
setProducts(res.data);

补充说明：如果业务必须用post请求，在第二个参数位置传入请求体数据即可，无数据时传空对象{}。

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