Failed preflight request in POST API call

[nitinl (Nitin Labhishetty)]

On submitting a form, I’m making a post request using ajax in custom code:

var Webflow = Webflow || [];
Webflow.push(function () {
  $('#wf-form-myform').submit(function (e) {
    e.preventDefault();
    const $form = $(this); // The submitted form
    $.ajax({
      url: $form.attr('action'),
      data: $form.serialize(),
      method: $form.attr('method'),
      contentType: "application/json",
      dataType: "json",
    })
      .done((res) => { console.log('Success') })
      .fail((res) => { console.log('Fail') })
      .always(() => { console.log('Completed') });
  });
});

This results in 2 preflight requests and a POST request (shown in image).

The requests with OPTIONS and POST methods succeed, but there is a 3rd request which fails. This subsequently causes the entire API call to end up in a failed state. I don’t understand where the second preflight request comes from and why does it fail despite setting liberal CORS headers. Has someone faced this before?

Extra info (headers of the 3 requests:)

1. Successful OPTIONS request:
   
   
2. Failed preflight request:
   
   
3. Successful POST request:
   
   

---

Here is my site Read-Only: LINK

[nitinl (Nitin Labhishetty)]

This was occurring due to an extra header that I added while making the POST request.
The ‘dataType: json’ header was attempting to parse the response from the API which wasn’t correctly formatted, which resulted in the ajax request to fail. The failure is shown in a weird way on Chrome, causing the confusion. 2 ways which helped me debug the error:

1. Making a verbose curl request for the same API call.
2. Inspecting the object passed to the failed request handler.