Ajax 调用和 Fetch 在移动设备上不起作用

Question

我正在尝试调用 API（在 AWS 上运行的 Spring boot 应用程序）。它不适用于移动设备，刷新网页时不会调用 onreadystatechange 方法。我也尝试过在移动设备上使用 fetch，但它也不起作用。在桌面上它可以正常工作。网页部署在另一台服务器上。

如果我在方法的开头添加 e.preventDefault() 和 e.stopPropagation() ，提交事件将被取消。 在readystatechanged上执行，结果是： 新XHRRequest.readyState = 4 newXHRRequest.status = 0 且响应文本为空

我应该使用jquery吗？你能看一下并告诉我你的想法吗？

代码如下：

  <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>

谢谢，

我尝试调用一个API，这取决于结果是否成功，它会将网页重定向到另一个html文件。如果凭据正确，我希望用户登录应用程序。

Answer 1

解决这个问题后，我发现了问题所在。这与证书有关。 Spring Boot 安装了一个安全证书，该证书颁发给我正在使用的域以外的域。 该网站帮助找出了这个问题。这就是所谓的不匹配名称。

例如：www.example.com，证书名称为 example.com

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