CODEWITHSUNDEEP
javascriptphpajaxxmlhttprequesthttp-headers
SizuNakomoto
SizuNakomoto

Reputation: 59

Boundary value of the header Content-Type is not applied to Request Payload and causing trouble

According to this SO post the boundary value of the header Content-Type can be changed, MDN says the same too. But in my case it doesn't happen, I don't get it why.

When I inspect the console (Chrome, Firefox), the header is set correctly, as I defined it: content-type: multipart/form-data; boundary=aBoundaryString

At the same time when I look at the request (in the console) I see data separated by ------WebKitFormBoundarymdIB1kNGNJ3dldnm in Chrome, and some big number-boundary in Firefox.

I use PHP on server side, and in this case when I try to read request data there via var_dump(file_get_contents('php://input')) I get result as string(0) "".

I have to say, that when I set the Content-Type header without "boundary", like this: content-type: multipart/form-data (and this is what I see in the console too), in this case the Request Payload is also separated with the same browser boundaries, but in this case, on the server side, request data is not empty, but as it should be and separated with same boundaries which I see in browser console.

So what's the problem, why can't I change the boundary? I mean it's definitely set, because I see that in the header Content-Type, but why isn't it applied to the request?

Screenshots from the Firefox v100 console

first 3 images is a request without boundary value

enter image description here enter image description here enter image description here

next 3 images is a request with boundary value

enter image description here enter image description here enter image description here

there's no difference if the file (uploads) is attached or not, result the same; and as I said in Chrome result the same

request sent via XMLHttpRequest, headers set by setRequestHeader()

Update

Okay, I've made my data to get to the server even with "boundary". For that I added " to the value, now it's like this:

content-type: "multipart/form-data; boundary=aBoundaryString"

before was like this:

content-type: multipart/form-data; boundary=aBoundaryString

BUT! The the boundary is still not applied, the Request Payload is still has browser's boundary, not mine. I've also printed $_SERVER["CONTENT_TYPE"] and there's "multipart/form-data; boundary=aBoundaryString". What's the problem?

Upvotes: 0

Views: 1598

Answers (1)

Quentin
Quentin

Reputation: 943564

The boundary is used to mark the edge between each part of a multipart request.

The Content-Type header needs to specify what string of characters is used to mark the boundary.

Thus, the Content-Type header needs to match the actual boundary.

You've shown us the code you are using to generate the Content-Type header. It's a hard-coded string.

You haven't shown us the code you are using to generate the request body. Whatever it is, it is generating a body that uses a different string to mark the boundary to the one you claimed it was using when you set the Content-Type header.

Since they don't match, the parser can't find the boundary that it is looking for.

While you haven't shown us what you are using to generate the body, it's a reasonable assumption that you are passing a FormData object.

The browser will generate a multipart request body from it, and it will generate a boundary that is safe (i.e. one that doesn't match any data actually in the object).

Under normal circumstances, the browser will also generate the correct Content-Type header from it … but you're overriding it.

Don't do that.

Let the browser infer the Content-Type header without your interference.

 const options = {
     method: 'POST',
     body: new FormData(document.querySelector('form')),
     // headers: // Stop. Leave the headers alone.
 };
 const response = await fetch(url, options);

Upvotes: 1

Related Questions