Скачать или смотреть Solving the multipart/form-data Issue in Axios POST Requests

Discover how to avoid the `Content-Type: multipart/form-data` issue in Axios POST requests by sending data as JSON.
---
This video is based on the question https://stackoverflow.com/q/63445500/ asked by the user 'jumpwire' ( https://stackoverflow.com/u/2226257/ ) and on the answer https://stackoverflow.com/a/63445612/ provided by the user 'charlietfl' ( https://stackoverflow.com/u/1175966/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: axios post request is sending a request header of Content-Type: multipart/form-data resulting in undefined req.body

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving the multipart/form-data Issue in Axios POST Requests

When working with forms in JavaScript, sending data correctly to your server can sometimes cause confusion, particularly when it comes to specifying headers for your requests. A common problem arises when the header Content-Type: multipart/form-data gets automatically included, leading to issues such as undefined request bodies on the server. If you've encountered this frustrating scenario, don't worry—this guide will explain why it happens and how to resolve it.

The Problem at Hand

You have a form designed to accept user input—like names, emails, and messages—and you're using Axios to send this data to a Node.js API. However, one of your forms is sending a request with the header Content-Type: multipart/form-data, which is unnecessary in this case since there are no file uploads involved. Consequently, the server's request body is appearing as undefined.

This issue may be perplexing, especially when other forms using similar techniques behave correctly. Let’s explore how you can troubleshoot this problem and ensure your data is sent as expected.

Understanding The Cause

Why multipart/form-data?

The Content-Type: multipart/form-data header is usually triggered when using the FormData object in JavaScript. The FormData object is particularly useful for handling forms that include file uploads, as it formats data into key/value pairs. Since your form doesn’t upload files, using FormData may be overkill and could lead to unwanted complications.

Why Some Forms Work?

The reason other forms might be sending a different header, such as Content-Type: application/json, is likely due to how they are formatting their data before sending it. Instead of utilizing FormData, those forms are properly sending a JSON representation of the data, which appears cleaner and is easier for the server to parse.

The Solution

How to Send Data as JSON

To resolve the issue, you don't need to use FormData. Instead, you can create a plain JavaScript object containing the data from your form inputs. Here’s how to refactor your form submission logic:

Change the Event Listener: Modify the form submission logic to build an object instead of a FormData.

[[See Video to Reveal this Text or Code Snippet]]

Using Axios to Send JSON: The updated sendCertificate function remains the same since you are already set up to handle JSON data.

[[See Video to Reveal this Text or Code Snippet]]

Note About Content-Type

With Axios, if you send a plain JavaScript object, it automatically sets the header to application/json, so you likely won’t need to specify it manually.

Conclusion

By adjusting your Axios form submission to send data as a plain object instead of using FormData, you can easily avoid complications that arise from unnecessary Content-Type: multipart/form-data headers. This not only makes your server's job easier but ensures your data is correctly interpreted.

Now, you can continue building smooth and efficient applications without running into undefined issues on your API end!