5

I am trying to send a PUT request using fetch API in my wordpress site. When using in Google Chrome the request is working without any issue. But in Firefox the request gets blocked as in the below image saying NS_BINDING_ABORTED in the console. Also there is no data in the response tab of the console. (I am using the latest version of Firefox 92.0(64-bit)). Issue occurs in both the localhost and hosted site.

enter image description here

After doing lot of searching about this issue, I have tried:

  1. Changing firefox's settings to turn off Enhanced Tracking Protection, turn off HTTPS-Only Mode
  2. Changing the Fetch request to an AJAX request.
  3. Adding manifest.json file with storage",*://localhost/*
  4. Adding polyfills
  5. Finally after referring to this answer, I tried adding Cache-Control: no-cache, must-revalidate, max-age=0 and Expires: headers to the response.

Still had no luck with solving the issue. In summary, the request is being blocked by the firefox browser and I couldn't figure out the reason. Any help is appreciated!

Gimantha23
  • 329
  • 6
  • 17
  • 1
    Having similar trouble, except in my case XHR works fine but a simple location.href= fails. I also applied no-cache and it didn't help. – Paul Kienitz Nov 21 '21 at 16:17
  • In my case it was because of the form submit, Fetch request gets cancelled. It was a bug in firefox and reported it to mozilla – Gimantha23 Nov 22 '21 at 16:02
  • The answer in my case was that the location.href was being set on a handler for a hyperlink, which was also trying to set a new location. The cure was to do preventDefault / stopPropagation before setting location.href ... I'd been doing them afterwards, which was too late. – Paul Kienitz Nov 26 '21 at 21:18
  • @Gimantha23, any luck on that? Also, I have the same error in my React app. – Schuere Dec 06 '21 at 10:31

1 Answers1

2

I encountered this when I inadvertently had a page refresh happening in the same event that triggered the fetch. I fixed it by adding an event.preventDefault() in the event. The site was loading so fast it was difficult to really grok the refresh, but it was happening silently in other browsers, and firefox explicitly noted this. Below is the code that caused it:

<form>
  <label htmlFor="username">Username</label>
  <input type="text" id="username" autoComplete="webauthn"></input>
  <button
    id="register"
    onClick={(evt) => {
      # The below line stops the click from submitting the form and was the fix:
      evt.preventDefault()
      # fetch was called within the register function:
      register().catch((err) =>
        console.error("Error performing register:", err)
      )
    }}
  >
    Register
  </button>
</form>

In hindsight it's clear why adding a button to an empty form was refreshing (it's submitting it), but ‍♂️‍♂️

Scott Willeke
  • 8,884
  • 1
  • 40
  • 52