nginx – XHR requests occasional timeout or community error on Safari iOS gadgets attributable to HTTP/3 – Stack Overflow

We at present have a Vuejs internet app utilizing axios for speaking with our API server. All is working properly on all gadgets besides we’re getting reviews from customers complaining that they’re sometimes having a tough time logging in on Safari iOS. After debugging and reviewing the entire request move we didn’t discover something flawed and we have had 0 reviews on different gadgets.

We lastly managed to breed the difficulty and on debug we observed the axios request was hanging and timing out or instantly returning a community error. We observed the request was by no means really reaching our API service. It was nevertheless reaching our servers and we discovered some entry logs with the failed requests.

It appears that evidently all of the failed requests are OPTIONS (preflight) and POST requests (to the login endpoint) coming solely from iOS gadgets. What made these requests stand out was the HTTP model. Because it seems, Safari is utilizing HTTP/3 for the preflight and loging request. These return a standing code of 000 for OPTIONS and 500 for POST. GET requests made utilizing HTTP/3 are dealt with efficiently.

Now our nginx model doesn’t help HTTP/3 (v1.22.0) and we can’t improve for the time being. All different browsers appear to be dealing with help accurately and requests will not be being made utilizing HTTP/3 besides on iOS Safari. Now we wish to know if there may be any means of letting the browser know the utmost model of HTTP supported by our server and although this may be a browser difficulty, how can we repair this with both a shopper aspect or an Nginx configuration.

Here’s a snippet of the XHR request executed utilizing axios :

export operate handleError(error) {
  console.log('Error', error);
  if (error.response && error.response.standing === 401){
    JWTHelper.clearJwt();
    location.reload(true);
  }

  if (error.response) {
      // Request made and server responded
      console.log(error.response.information.message);
      return Promise.reject(error.response.information.message);
  } else {
      // One thing occurred in organising the request that triggered an Error
      console.log('Error', error);
      return Promise.reject(error.message);
  }
}

const apiClient = axios.create({
    baseURL: course of.env.VUE_APP_API_BASE_URL,
    headers: {
        "Content material-type": "software/json",
    },
});

operate login(username, password, orgId){
    const postData = {
        "orgId": orgId,
        "password": password,
        "username": username
    };
    return apiClient.publish("/person/login", postData)
        .then((response) => {
            const { information, standing } = response;
            if (standing === 200){
                JWTHelper.saveJwt(information.information.token);
            }
            return response.information
        })
        .catch((error) => handleError(error));
}

(These features are in separate recordsdata however mixed right here)

When the difficulty happens (it would not all the time occur) the community inspector both exhibits the request loading indefinetly and at last occasions out. Or generally we instantly get a community error. When this occurs both the failed preflight causes the request to timeout or after we get a community error instantly it’s in all probability the server responding with a 500 error.

Right here is the OPTIONS request being despatched by Safari after which no POST request is shipped :

XXXXXX:- - - [22/Oct/2023:23:33:11 +0000] "OPTIONS /person/login HTTP/3" 000 0 "https://admin.instance.com/" "Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Model/16.2 Cellular/15E148 Safari/604.1" "-" "api.instance.com" sn="_" rt=17.010 ua="-" us="-" ut="-" ul="-" cs=-

When a publish request is shipped there may be often NO OPTIONS request being despatched earlier than it and it might look one thing like this :

XXXXXX:- - - [22/Oct/2023:22:12:13 +0000] "POST /person/login HTTP/3" 500 0 "https://admin.instance.com/" "Mozilla/5.0 (iPhone; CPU iPhone OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Model/16.2 Cellular/15E148 Safari/604.1" "-" "api.instance.com" sn="_" rt=17.010 ua="-" us="-" ut="-" ul="-" cs=-

We have now tried configuring the CORS settings and it seems that rising the max-age reduces the difficulty from occurring too typically (OPTIONS request get despatched much less often) however this isn’t a viable answer.

Now the query is, what’s the appropriate means of letting safari use HTTP/2.0 ? Should not it fallback to HTTP/2.0 when a request fails on HTTP/3 ? And is it attainable Axios isn’t dealing with the failed HTTP/3 preflight request accurately and timing out ? But when that is the case why are all different browsers not having any points ?