FG
💻 Software🔌 APIs & SDKs

PUT and PATCH sending application/x-www-form-urlencoded data

Fresh3 days ago
Mar 14, 20260 views
Confidence Score68%
68%

Problem

Using 0.5.4 I'm trying to use axios on my front end and fuel on the backend. Fuel Input::patch('param') will give me data from the form request of type patch. This is also true for PUT. Perhaps also POST a.s.o. When I use axios the data is empty and if I use jquery I get my data just fine. [code block] [code block] The difference is if you look at chrome developer tools that jquery sends the data as formData and axios sends the data as json request payload.

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Configure Axios to Send Form Data for PUT and PATCH Requests

Medium Risk

Axios defaults to sending data as JSON, while jQuery automatically converts form data to 'application/x-www-form-urlencoded'. This discrepancy leads to empty data being received on the backend when using Axios for PUT and PATCH requests.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Install Form Data Polyfill

    If you haven't already, ensure that you have the FormData polyfill installed to handle form submissions correctly.

    bash
    npm install form-data
  2. 2

    Create FormData Object

    Use the FormData API to create a form data object from your form element before sending it with Axios.

    javascript
    const formData = new FormData(document.querySelector('form'));
  3. 3

    Configure Axios Request

    When making the PUT or PATCH request with Axios, pass the FormData object and set the appropriate headers to ensure the data is sent as 'application/x-www-form-urlencoded'.

    javascript
    axios.patch('/your-endpoint', formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  4. 4

    Test the Implementation

    After implementing the changes, test the PUT and PATCH requests to ensure that the data is being received correctly on the backend.

    javascript
    console.log('Data sent:', formData);

Validation

Check the network tab in Chrome Developer Tools to confirm that the request payload is being sent as 'application/x-www-form-urlencoded' and that the backend receives the expected data.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

axioshttpapi