Content-Type header has multiple comma separated values

[rohit-gohri]

I'm using formdata-polyfill and blob-polyfill with jQuery v1.12.4 on IE9 in a webpack build.

Something like this:

const form_data = new FormData($this[0]);

if (this.id) form_data.append('src_form_id', this.id);
if (extra_data) form_data.append('extra_data', extra_data);

$.ajax({
	type: 'POST',
	url,
	data: form_data,
	success: handleSuccess,
	error: handleFailure,
	dataType: 'json',
	processData: false,
	contentType: false,
});

The request that is sent with this has headers like:

Content-Type	multipart/form-data; boundary=----formdata-polyfill-0.9083965467102468, multipart/form-data; boundary=----formdata-polyfill-0.9083965467102468

I think this multi valued content-type header is breaking the parsing in the formidable library. When sent through native FormData for the same data and request on latest Firefox the content-type header only has one value.

[jimmywarting]

hmm...

Both FromData polyfill and blob.js#L508-L527 try to fix ie's missing content type

setRequestHeader seems to act like appendRequestHeader? 🤔

either way both blob.js and my formdata-polyfill should also monkey patch setRequestHeader too check if someone did actually set the content-type and then just not do that step

[jimmywarting]

yep, confirmed

xhr = new XMLHttpRequest()
xhr.open('GET', 'https://httpbin.org/get')
xhr.responseType = 'json'
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.setRequestHeader('Content-Type', 'text/plain')
xhr.send()

xhr.response.headers['Content-Type'] // text/plain, text/plain

[jimmywarting]

Would you be up for making a PR?

Maybe would do something more like

const setRequestHeader = XMLHttpRequest.prototype.setRequestHeader

XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
  if (header.toLowerCase() === 'content-type') this._hasContentType = true
  setRequestHeader.call(this, header, value)
}

[rohit-gohri]

Would you be up for making a PR?

Yup.

Maybe would do something more like

const setRequestHeader = XMLHttpRequest.prototype.setRequestHeader

XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
  if (header.toLowerCase() === 'content-type') this._hasContentType = true
  setRequestHeader.call(this, header, value)
}

Thanks for the basic idea. I should be able to get it done by tomorrow (it's 1AM here)

[jimmywarting]

You don't have to, But if you could write a test also that would be 👍

Might be harder to test what the actual request headers are (plus it's async). And we don't have any echoing server, but using httpbin for one request might not do much harm

[jimmywarting]

chrome wasn't happy with sync xhr, changed the test to be async
released as 3.0.18

Thanks for your contribution