IE11 empty request body

[chhatch]

Thanks for helping me in my never ending struggle to support Internet Explorer. The polyfill seems to be working correctly until I send the FormData object to out server. The server receives the FormData correctly from chrome and firefox. Here is how I'm sending the form (data is a FormData object):

    async function postData(url = '', data = {}) {
        const response = await fetch(url, {
            method: 'POST',
            mode: 'cors',
            cache: 'no-cache', 
            credentials: 'same-origin',
            redirect: 'follow', 
            referrer: 'no-referrer',
            body: data,
        })
        return await response // parses JSON response into native JavaScript objects
    }

Is there something wrong here? Is there something else I need to do besides just dropping in the formdata.min.js? Any help will be greatly appreciated because I really don't know where to go from here.

[jimmywarting]

first and formost, fetch isn't supported in IE11 so if you aren't using some fetch wrapper around XMLHttpRequest then that is your problem.

Suggestion: https://github.com/github/fetch

formdata-polyfill is known to work with XMLHttpRequest and any fetch implementation that uses xhr as a fallback. globalThis.fetch is also patched if it exists...

---

have you looked in the console if you see any errors?

[chhatch]

Thanks for the quick response! Fetch is being polyfilled like so,

<script src="//cdn.polyfill.io/v3/polyfill.min.js?unknown=polyfill&features=fetch" defer></script>

I'm not getting any other errors on the page. It sounds like the best course of action here is to try another polyfill for fetch. I'll give it a try tomorrow morning and report back.

[jimmywarting]

Seems like polyfill.io is using github/fetch... try changing the order in which you load polyfill.io and fromdata-polyfill if that helps

[chhatch]

I tried loading formdata-polyfill immediately before and after polyfill.io (with and without defer) with the same results every time. I'm going to chalk this up to an environment issue with Shopify. I sincerely appreciate your assistance, and I'm open to any other suggestions you have. For now I'll try using XMLHttpRequest instead of fetch.

[chhatch]

Quick update: Using XMLHttpRequest directly didn't change anything. Also, I did verify that the data is getting added to the FormData object correctly to rule out an issue elsewhere.

[chhatch]

I have confirmed that this is some environment issue. I noticed that

formData.forEach(function (value, name) {
    console.log(name, value)
})

produced the expected output in chrome but nothing in IE11. I get the same result if I try to log the key/value pairs using formData.keys() or formData.entries()

So, to test this in an neutral environment I used simple-server to sever up the following page:

Howdy world!
<script>
//formdata.min.js goes here...
    var formData = new FormData
    formData.set('test', 1234)
    formData.forEach(function (value, key) {
        console.log(key, value)
    })
</script>

The test page logs the key/value pair as expected in Chrome and IE11.