XmlHttpRequest POST method fails with status code 400 in IE11

Question

I have a React app containing a JavaScript method which posts data to a server method. This method works fine in every browser under the sun...except IE11 (shocking I know). Unfortunately IE11 support is a requirement for this project.

IIS logs reveal 400 (bad request) HTTP status codes.

I chose not to use fetch() due to its incompatibility with IE11, and I'd rather avoid resorting to external libraries like axios or jQuery for a single method for a single browser.

I attempted a few Content-Type header values (application/json and x-url-form-encoded), and also tried various other headers which may or may not be related (Pragma, CORS - even though it's not cross-origin, Cache-Control et al.).

handleSubmit(event) {
    const booking = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3',
    };

    const xhr = new XMLHttpRequest();
    const url = "api/Booking/AddBooking";

    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(JSON.stringify(booking));

    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);

            this.setState({
                bookingResponse: response,
                showModal: true
            });
        }
    }
    event.preventDefault();
}

I know the external libraries work with IE11 so there must be a way around this with vanilla JavaScript, I just can't find what it is. Any ideas?

Answer 1

The issue was related to some of the variable values. I was using ES6 string interpolation (i.e. back ticks), which is unsupported in IE.