Ajax call and Fetch did not work on Mobile

Question

I am trying to make a call to an API (Spring boot application which is running on AWS). It is not working on mobile, webpage is refreshed an method onreadystatechange is not called. I also tried using fetch for mobile devices but it does not work too. On desktop it is working properly. Webpage was deployed on anohter server.

If I add e.preventDefault() and e.stopPropagation() at the begginig of the method the submit event is cancelled. On readystatechanged is executed and the result is: newXHRRequest.readyState = 4 newXHRRequest.status = 0 and responsetext empty

Should I use jquery? Can you have a look and let me know what you think?

Code is the following:

  <script>
   function isMobile() {
    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
    return regex.test(navigator.userAgent);
  }
  
  if (isMobile()) { // Mobile device

    const signInMobile = document.getElementById("signin");
    signInMobile.addEventListener("submit", handleFormSubmitMobile);
  
    function handleFormSubmitMobile(e) {
      const newXHRRequest = new XMLHttpRequest();
    
      newXHRRequest.open(
        "POST",
        "https://xxxxxxxxxx/api/v1/user/login",
        true
      );

      newXHRRequest.setRequestHeader("Content-type", "application/json; charset=UTF-8");

 var password = document.getElementById('floatingPassword').value;
      var email = document.getElementById('floatingEmail').value;
      document.getElementById('showError').innerText = "password" + " " + "email";
    
      let body = JSON.stringify({
          email: email,
          password: password,
      });
  
      newXHRRequest.onreadystatechange = function () {
                                      

        if (newXHRRequest.readyState == 4 && newXHRRequest.status == 200) {

          const json = JSON.parse(newXHRRequest.responseText);
          localStorage.setItem("token", data.message)
          setTimeout(redirect1, 2000);
  
        } else {
  
          const json = JSON.parse(newXHRRequest.responseText);
          document.getElementById('showError').innerText = json.message;
  
        }
      };
    
      newXHRRequest.send(body);

          e.preventDefault();
          e.stopPropagation();
            return false;
    }
    
    function redirect1() {

              window.location.href="booking.html";

    }

    } else { // Desktop Device
    
        const signIn = document.getElementById("signin");
        signIn.addEventListener("submit", handleFormSubmit);
        async function handleFormSubmit(e) {
          e.preventDefault();
          var password = document.getElementById('floatingPassword').value;
          var email = document.getElementById('floatingEmail').value;

          let response = await fetch('https://xxxxxxxxxxxxx/api/v1/user/login', {
              method: 'POST',
              body: JSON.stringify({
                email: email,
                password: password,
              }),
              headers: {
                'Content-type': 'application/json; charset=UTF-8',
              }
          })

          if (response.ok) {
            let data = await response.json();
            successCallback(data);
          } else {
            failCallback(response);
          };
        }

        function successCallback(data) {
              localStorage.setItem("token", data.message)
              setTimeout(redirect, 2000);
        }

        function redirect() {

              window.location.href="booking.html";

        }

        function failCallback(error) {

           console.log(error.status);

           error.json().then((json) => {
              document.getElementById('showError').innerText = "Error: " + json.message;
              console.log(json.message);
           });

        }
        
    }

  </script>

Thanks,

I tried to call an API and it depends if the result is successful or not , it redirects the webpage to another html file. I want user to log into the application if the credentials are correct.

Answer 1

After working on this issue, I found out what the issue was. It was related to certificates. The spring boot has a security certificate installed that was issued to a domain other than the one I was using. This website helped to find out this issue. It is called Mismatch name.

For example: www.example.com and the name for the certificate was example.com

https://www.ssllabs.com/index.html