POST Axios network error only on iOS and 4G

Question

I am building a MERN app, and I'm using Axios to fetch and post data to my backend. Sadly when I'm on iOS + 4G (working fine over wifi and/or Android) I'm having a "Axios Network Error".

import React, {
  useEffect,
  useState
} from "react";
import axios from "axios";
import {
  useParams
} from "react-router-dom";
import {
  TextField,
  Select,
  FormControl,
  InputLabel,
  MenuItem,
  Avatar,
} from "@mui/material";
import "./PageVHL.css";
import authHeader from "../auth-header";

function Perception() {
  const [vhl, setVhl] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const {
    id
  } = useParams();
  const [currentUser, setCurrentUser] = useState({});

  const onChangePosition = (e) => {
    setVhl({
      ...vhl,
      position: e.target.value,
    });
  };

  const onChangeEmploi = (e) => {
    setVhl({
      ...vhl,
      emploi: e.target.value,
    });
  };

  const onChangeUtilisateur = (e) => {
    setVhl({
      ...vhl,
      utilisateur: e.target.value,
    });
  };

  const onChangeKm = (e) => {
    const kmValue = e.target.value;
    let revisionprov;
    if (
      currentUser.service === "test1" ||
      currentUser.service === "test2" ||
      currentUser.service === "test3" ||
      currentUser.service === "test4"
    ) {
      revisionprov = Math.ceil(kmValue / 10000) * 10000;
    } else {
      revisionprov = Math.ceil(kmValue / 10000) * 10000 + 10000;
    }
    setVhl({
      ...vhl,
      km: e.target.value,
      prochainerevision: revisionprov,
    });
  };

  const onSubmit = (e) => {
    let urlToPost = "http://redacted/vhl/update/" + id
    e.preventDefault();
    axios
      .post(urlToPost, vhl, {
        headers: authHeader(),
      })
      .then((res) => {
        console.log(res.data);
        setVhl((prevVhl) => ({ ...prevVhl,
          ...vhl
        }));
      })
      .catch((error) => {
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        }
      });

    if (vhl.position !== "Disponible") {
      const histoperception = {
        ...vhl,
        idvhl: vhl.id,
        nomvhl: vhl.nomvhl,
        service: vhl.service,
        date: new Date(),
        position: vhl.position,
        emploi: vhl.emploi,
        utilisateur: vhl.utilisateur,
        km: vhl.km,
      };

      axios
        .post(
          "http://redacted/historiqueperception/add/",
          histoperception, {
            headers: authHeader()
          }
        )
        .then((res) => {
          console.log(res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    }

    window.location = `/pagevhl/${vhl._id}`;
  };

  useEffect(() => {
    if (isLoading) {
      axios
        .get("http://redacted/vhl/" + id, {
          headers: authHeader()
        })
        .then((response) => {
          console.log(response.data);
          const dateNewFormat = new Date(response.data.datect);
          const vhlUpdated = {
            datect: dateNewFormat
          };
          setVhl({
            ...response.data,
            ...vhlUpdated,
          });
          console.log(vhl);
        })
        .catch((error) => {
          console.log(error);
        });
      setIsLoading(false);
    }
    axios
      .get("http://redacted/users/CurrentUser", {
        headers: authHeader(),
      })
      .then((response) => {
        setCurrentUser(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [id, isLoading]);

  return ( <
    div class = "page-container" >
    <
    Avatar alt = {
      vhl.nomvhl
    }
    srcSet = {
      vhl.image
    }
    sx = {
      {
        width: 180,
        height: 180,
        margin: "0 auto"
      }
    }
    /> <
    h2 >
    <
    strong > {
      vhl.nomvhl
    } < /strong> <
    /h2> <
    p > {
      vhl.dossardorigine
    } < /p>

    <
    form onSubmit = {
      onSubmit
    } >
    <
    FormControl fullWidth className = "field-margin" >
    <
    InputLabel id = "demo-simple-select-label" > Position < /InputLabel> <
    Select labelId = "demo-simple-select-label"
    id = "demo-simple-select"
    value = {
      vhl.position
    }
    label = "Position"
    onChange = {
      onChangePosition
    }
    sx = {
      {
        marginBottom: "15px",
        width: "95%"
      }
    } >
    <
    MenuItem value = "Disponible" > Disponible < /MenuItem> <
    MenuItem value = "Liaison" > Liaison < /MenuItem> <
    MenuItem value = "Exercice" > Exercice < /MenuItem> <
    MenuItem value = "Garage" > Garage < /MenuItem> <
    MenuItem value = "Diagnostic Garage" > Diagnostic Garage < /MenuItem> <
    /Select> <
    /FormControl>

    <
    TextField id = "outlined-password-input"
    label = "Emploi"
    type = "text"
    autoComplete = "current-password"
    size = "small"
    value = {
      vhl.emploi
    }
    onChange = {
      onChangeEmploi
    }
    className = "field-margin"
    sx = {
      {
        marginBottom: "15px",
        width: "95%"
      }
    }
    /> <
    TextField id = "outlined-password-input"
    label = "Utilisateur"
    type = "text"
    autoComplete = "current-password"
    size = "small"
    value = {
      vhl.utilisateur
    }
    onChange = {
      onChangeUtilisateur
    }
    className = "field-margin"
    sx = {
      {
        marginBottom: "15px",
        width: "95%"
      }
    }
    /> <
    TextField id = "outlined-password-input"
    label = "Kilométrage"
    type = "number"
    size = "small"
    value = {
      vhl.km
    }
    onChange = {
      onChangeKm
    }
    className = "field-margin"
    sx = {
      {
        marginBottom: "15px",
        width: "95%"
      }
    }
    />

    <
    div className = "form-group text-center" >
    <
    input type = "submit"
    value = "Perception"
    className = "btn btn-primary" / >
    <
    /div> <
    /form> <
    /div>
  );
}

export default Perception;

I have tried to disable the firewall, removing Nginx and even put the simplest route, nothing works. I also try to modify the CORS policy, but no difference so far. GET request works fine.

Edit: After 3 days of debugging and going mad, the issue was the redirect happening before the end of the axios post