Can not change Contant-Type when data is FormData

[TabrisK]

axios({
                method: "PUT",
                url: url,
                transformRequest: [function (data, headers) {
                    // Do whatever you want to transform the data
                    return formData;
                }],
                headers: {
                    'Content-Type': file.type
                },
                "withCredentials": false
            });

Launched request with Content-Type：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryPz13ZA77aLqgPlwB

[Oceanswave]

Looks like when axios detects form data in the request body, it auto-sets a multipart/form-data header, overriding the header value.

This gets tricky if you're mocking responses from the server with something like Nock, which will see a different boundary value in the response -or- needing to interact with a api that expects a multipart/related content type.

[ppozniak]

I am just facing the same issue.
Have you found any way to solve this @TabrisK

[TabrisK]

@ppozniak
Unfortunately, I can't change the behavior of axios. Finally I solved the problem by using XMLHttpRequest.

[ppozniak]

axios/lib/adapters/xhr.js

Line 16 in 283d7b3

delete requestHeaders['Content-Type']; // Let the browser set it

This is probably the cause.

[ppozniak]

One really ugly hack, without rewriting the app would be to hack object's prototype. This will make Content-type stay as it is.

transformRequest: payload => {
       // ...
        Object.setPrototypeOf(formData, null);
        return formData;
      },

[jasonsaayman]

Fixed with #1773

[chinesedfan]

@jasonsaayman I am afraid #1773 didn't solve it. Reopen for confirming.

[Masaokb]

Has this issue been solved?

In my case, using axios.request, content-type header disappeared even when I specified, but using axios.post didn't seem to have any problem.

[manamika]

In my case, i need to override the content-type to have a version - Content-Type: multipart/form-data;version=2.0.0;boundary=B_someBoundary. Is this something that can be achieved?

[Kalinin]

I have the same bug as described in issue. Still happens.

[YsBunkerchain]

The Get method also not able to change the content-type when I put the data as FormData.

[shivanshr]

I am not able to do so with POST(mulitpart/form-data) request, I can not set header['Content-Type'] 'mulitpart/form-data', it always changes to 'text/plain;charset=UTF-8'.
"axios": "^0.21.1",
"react-native": "0.63.4"

[norbertsongin]

It's because of this part https://github.com/axios/axios/blob/master/lib/adapters/xhr.js#L18-L20
Looks like it was first reported in 2017 #767 but was closed without being fixed

Removing this part worked for me

[JonathanSchndr]

:( same issue here in nuxt-auth with axios as dep.

[yoyo837]

The fix has been reverted, this may require a reopen.

[jasonsaayman]

Yeah this was reverted sorry about that re-opening, but we will need to approach this better