Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FormData request header doesn't include boundary #4631

Closed
kubajmarek opened this issue Apr 26, 2022 · 12 comments · Fixed by #4640
Closed

FormData request header doesn't include boundary #4631

kubajmarek opened this issue Apr 26, 2022 · 12 comments · Fixed by #4640

Comments

@kubajmarek
Copy link

Describe the bug

Boundary is included in payload, but it's missing in Content-Type header - it's just multipart/form-data.

To Reproduce

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Axios issue with form-data</title>
    <script src="https://unpkg.com/axios@0.27.1/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      (async () => {
        await axios.postForm('http://localhost:8080/', { a: 'b' });
      })();
    </script>
  </body>
</html>

Screenshot 2022-04-26 at 12 53 19
Screenshot 2022-04-26 at 12 53 27

Expected behavior

Content-Type header should have a boundary.

Environment

  • Axios Version [0.27.0/0.27.1]
  • Adapter [n/a]
  • Browser [Chrome]
  • Browser Version [100.0.4896.127]
  • Node.js Version [n/a]
  • OS: [MacOS 12.3.1]
  • Additional Library Versions [n/a]

Additional context/Screenshots

n/a
@aspnetde
Copy link

aspnetde commented Apr 26, 2022 •
edited

Can confirm. This breaks file uploads for my React application (web, all references up-to-date). Downgrading to 0.26.0 helps to work around.

@kubajmarek
Copy link
Author

Can confirm. This breaks file uploads for my React application (web, all references up-to-date). Downgrading to 0.26.0 helps to work around.

0.26.0 doesn't work for me, as payload is broken there. 😬
I'm keeping axios at 0.24.0 for a while now.

@daids
Copy link

daids commented Apr 26, 2022 •
edited

me too, 0.26.1 work for me, but 0.27.1 not work. i am try it with chrome[100.0.4896.127] and safari[15.1 (15612.2.9.1.30, 15612)], it doesn't include boundary

@jasonsaayman jasonsaayman mentioned this issue Apr 26, 2022
Closed
@jasonsaayman
Copy link
Member

Looking into it, sorry about that

@bashrj
Copy link

bashrj commented Apr 26, 2022 •
edited

I just wasted an hour and a half.

@komik966
Copy link

komik966 commented Apr 26, 2022 •
edited

The below change was introduced in v0.27.0:

Removed functionality that removed the the Content-Type request header when passing FormData (#3785)

Now axios forcibly sets content-type header for requests with FormData payload.
Having possibility to send FormData request without a content-type header should do the trick.

https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post

@DigitalBrainJS DigitalBrainJS mentioned this issue Apr 26, 2022
Merged
@DigitalBrainJS
Copy link
Collaborator

DigitalBrainJS commented Apr 26, 2022 •
edited

@jasonsaayman hotfix: #4640, #4639, (#4641 or #4596)

@corasaurus-hex corasaurus-hex mentioned this issue Apr 26, 2022
Closed
@zavvla
Copy link

zavvla commented Apr 26, 2022

telegram-cloud-photo-size-2-5422568654593179350-x
I have this problem too. =(

@philBrown philBrown mentioned this issue Apr 27, 2022
Closed
@symonxdd
Copy link

For my college project I needed to upload a file. I found some article that explains how to do that in Vue and I had literally struggled for 5 hours straight with this piece of crap bug to just find out that the authors app used an old version of axios which didn't include this pathetic bug which should never had been introduced, ever...

I think I'm done with axios for a few years.

At the time of writing this is axios 0.27.1 (latest)

@philBrown philBrown mentioned this issue Apr 27, 2022
Closed
@jasonsaayman
Copy link
Member

Thanks to everyone and especially @DigitalBrainJS who helped with this, i will relase 0.27.2 asap.

@NikolayCheremnov
Copy link

Thanks to everyone and especially @DigitalBrainJS who helped with this, i will relase 0.27.2 asap.

Hello. Why is the problem reproduced on axios version 1.1.3 (npm install axios@latest), but works on version 0.27.2 (now it's a minor version?).
Thanks.

@emielmolenaar
Copy link

Thanks to everyone and especially @DigitalBrainJS who helped with this, i will relase 0.27.2 asap.

Hello. Why is the problem reproduced on axios version 1.1.3 (npm install axios@latest), but works on version 0.27.2 (now it's a minor version?). Thanks.

Indeed. I am having bounday-header issues with 1.1.3, but not with ^0.27. Don't get why 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed FormData posting in browser environment by reverting #3785; DigitalBrainJS/axios