Issue 1:
I am using Axios in my most of my react native projects but I have never met this strange error. I am trying to do a post request to my server but it always giving me Network Error. I tried to do with curl and it worked perfectly and I also tried to visit the IP address from my mobile using a browser and it worked there too. When I try to run the server locally it works perfectly (via reverse TCP)

Issue 2:
Bug

Hello, How can i fix duplicate POST and DELETE axios request and i think PUT AND PATCH also. whenever i submit the data or deleting the data using the code below i get duplicate request and response. on the first request it works fine, on the second request a duplicate request/response will happen.

Expected behavior

Remove Duplicate Request and Response.

Code

DELETE REQUEST

function setDeleteModal(event) {
const dataToBeDelete = event.target.getAttribute("id").toString();
reportsDeletemodal.classList.add("is-active");
htmlClipped.classList.add("is-clipped");
reportsDeleteClose.addEventListener("click", removeDeleteModal, false);

async function ConfirmDelete(e) {
e.preventDefault();
try {
const responseData = await axios.delete( `/admin/reports/delete/report/${dataToBeDelete}`);
} catch (error) {
console.log(error);
}
reportsDeletemodal.classList.remove("is-active");
htmlClipped.classList.remove("is-clipped");
loadInitialPagination();
}

function cancelDelete() {
reportsDeletemodal.classList.remove("is-active");
htmlClipped.classList.remove("is-clipped");
}

reportsModalConfirmBtn.addEventListener("click", ConfirmDelete, false);
reportsModalCancelBtn.addEventListener("click", cancelDelete, false);
}

function removeDeleteModal() {
reportsDeletemodal.classList.remove("is-active");
htmlClipped.classList.remove("is-clipped");
}

for (let i = 0, index = removeReportsButtton.length; i < index; i++) {
removeReportsButtton[i].addEventListener("click", setDeleteModal, false);
}

POST REQUEST

async function insertDataIntoDatabase(event) {
event.preventDefault();
addSuccessContainer.style.display = "none";
addErrorContainer.style.display = "none";
addSuccessContainer.innerHTML = "";
addErrorContainer.innerHTML = "";
let errorsHtml = "";

if (!reportsName.value || !reportsType.value || !reportsDescription.value || !reportsDocument.value === "") {
addErrorContainer.innerHTML =
'<p class="has-text-centered">Incomplete Field or invalid Field! please Complete Required fields!</p>';
addErrorContainer.style.display = "block";
} else {
try {
const responseAddData = await axios.post("/admin/reports",new FormData(addReportForm));
console.log(responseAddData);
if (responseAddData.data.errors) {
for (let i = 0, index = responseAddData.data.errors.length; i < index; i++) {
errorsHtml += `<p class="has-text-left">${responseAddData.data.errors[i]}</p>`;
}
addErrorContainer.innerHTML = errorsHtml;
addErrorContainer.style.display = "block";
} else if (!responseAddData.data.errors) {
addSuccessContainer.innerHTML = '<p class="has-text-centered">Data Successfully Added!</p>';
addSuccessContainer.style.display = "block";
loadInitialPagination();
}
} catch (error) {
console.log(error.response);
}
}
}

addReportForm.addEventListener("submit", insertDataIntoDatabase, false);
reportsAddCancel.addEventListener("click", removeAddModalContainer, false);
addReportsButton.addEventListener( "click",showAddModalContainer,false);

Environment:

Axios 0.19.2

OS: Windows 10

Chrome

Version 80.0.3987.87

Polyfill.io v3 with async/await feature

Laravel 6.0

DATABASE

POST RESPONSE

DELETE RESPONSE