Skip to content

Added automatic payload serialization to application/x-www-form-urlencoded#4714

Merged
jasonsaayman merged 2 commits intoaxios:masterfrom
DigitalBrainJS:feat/url-encoded-form
May 16, 2022
Merged

Added automatic payload serialization to application/x-www-form-urlencoded#4714
jasonsaayman merged 2 commits intoaxios:masterfrom
DigitalBrainJS:feat/url-encoded-form

Conversation

@DigitalBrainJS
Copy link
Copy Markdown
Collaborator

@DigitalBrainJS DigitalBrainJS commented May 13, 2022

  • Fixed toFormData regression bug (unreleased) with Array-like objects serialization;
  • Added toURLEncodedForm helper (it's a tiny wrapper around toFormData helper);
  • Added automatic payload serialization to application/x-www-form-urlencoded to have parity with multipart/form-data;
  • Added test of handling application/x-www-form-urlencoded body by express.js;
  • Updated README.md;
  • Added missed param in JSDoc;
  • Fixed hrefs in README.md;
const data = {
  x: 1,
  arr: [1, 2, 3],
  arr2: [1, [2], 3],
  users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
};

await axios.postForm('https://postman-echo.com/post', data,
  {headers: {'content-type': 'application/x-www-form-urlencoded'}}
);

can be handled by express out of the box:

  var app = express();
  
  // support encoded bodies with extended params signatures
  app.use(bodyParser.urlencoded({ extended: true }));
  
  app.post('/', function (req, res, next) {
     res.send(JSON.stringify(req.body));
  });

  server = app.listen(3000);

…s serialization;

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;
@DigitalBrainJS DigitalBrainJS force-pushed the feat/url-encoded-form branch from 7c6a5ae to fbf1449 Compare May 13, 2022 23:23
@jasonsaayman
Copy link
Copy Markdown
Member

Cool thanks for this 😄

@jasonsaayman jasonsaayman merged commit c05ad48 into axios:master May 16, 2022
jasonsaayman added a commit that referenced this pull request May 28, 2022
* Fixing proxy beforeRedirect regression (#4708)

* Adding Canceler parameters config and request (#4711)

Co-authored-by: Jay <[email protected]>

* Fixed `toFormData` regression bug (unreleased) with Array-like objects serialization; (#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>

* Allow webpack users to overwrite buildins (#4715)

Co-authored-by: Jay <[email protected]>

* Fixed `AxiosError` status code type; (#4717)

Co-authored-by: Jay <[email protected]>

* Fixed `AxiosError` stack capturing; (#4718)

Co-authored-by: Jay <[email protected]>

* allow type definition for axios instance methods (#4224)

Co-authored-by: Jay <[email protected]>

* add `string[]` to `AxiosRequestHeaders` type (#4322)

Co-authored-by: Jay <[email protected]>

* Fixing AxiosRequestHeaders typings (#4334)

Co-authored-by: Shakirov Kirill <[email protected]>
Co-authored-by: Jay <[email protected]>

* Added the ability for the `url-encoded-form` serializer to respect the `formSerializer` config; (#4721)

Added test for `formSerializer` config in context of `url-encoded-form` serializer;

* Updated eslint config; (#4722)

Co-authored-by: Jay <[email protected]>

* fix: add isCancel type assert (#4293)

Co-authored-by: Jay <[email protected]>

* Added data URL support for node.js; (#4725)

* Added data URL support for node.js;
Added missed data URL protocol for the browser environment;
Optimized JSON parsing in the default response transformer;
Refactored project structure;
Added `cause` prop for AxiosError instance that refers to the original error if it was wrapped with `AxiosError.from` method;
Added fromDataURI helper;
Added test for handling data:url as an `arraybuffer|text|stream`;

* Added throwing of 405 HTTP error if the method is not GET;

* Fix/4263/maxbodylength defaults (#4731)

* test(http): add test case for default body length in follow-redirects

* fix(http): provide proper default body length to follow-redirects

Co-authored-by: Jay <[email protected]>

* Adding types for progress event callbacks (#4675)

Co-authored-by: Jay <[email protected]>

* Fixed bug #4727 : toFormData Blob issue on node>v17; (#4728)

* Fixed bug #4727;
Added node 18.x to the CI;
Added hotfix for `ERR_OSSL_EVP_UNSUPPORTED` issue with karma running on node >=17.x;
Added `cross-env` to allow running build and test scripts on Windows platforms;

* Added conditional setting of `--openssl-legacy-provider` option for node versions >=17.x;

* Refactored ssl-hotfix & test script;

* Fixed and refactored default max body length test due to ECONNRESET failure;

* Added test for converting the data uri to a Blob;
Fixed bug with parsing mime type for Blob;

Co-authored-by: Jay <[email protected]>

* URL params serializer; (#4734)

* Refactored BuildURL helper to use URLSearchParams serializer;

* Updated typings;
Added TS test;

* Added `axios.formToJSON` method; (#4735)

* Draft

* Added `formDataToJSON` helper;
Added `axios.formToJSON` method;
Added client tests;

Co-authored-by: Jay <[email protected]>

* Bump grunt from 1.5.2 to 1.5.3 (#4743)

Bumps [grunt](https://github.com/gruntjs/grunt) from 1.5.2 to 1.5.3.
- [Release notes](https://github.com/gruntjs/grunt/releases)
- [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG)
- [Commits](gruntjs/grunt@v1.5.2...v1.5.3)

---
updated-dependencies:
- dependency-name: grunt
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Updated README.md; (#4742)

Updated index.d.ts;

Co-authored-by: Jay <[email protected]>

* chore: removed Travis CI config file as we have moved to GitHub actions

* chore: updated actions to run on new version based branches

* Fix/4737/timeout error message for http (#4738)

* Fixing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

* Testing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

Co-authored-by: Jay <[email protected]>

* Fixing content-type header repeated (#4745)

Co-authored-by: Jay <[email protected]>

Co-authored-by: Maxime Bargiel <[email protected]>
Co-authored-by: 毛呆 <[email protected]>
Co-authored-by: Dmitriy Mozgovoy <[email protected]>
Co-authored-by: Tom Ceuppens <[email protected]>
Co-authored-by: Jelle Schutter <[email protected]>
Co-authored-by: Rraji Abdelbari <[email protected]>
Co-authored-by: Kirill Shakirov <[email protected]>
Co-authored-by: Shakirov Kirill <[email protected]>
Co-authored-by: chenjigeng <[email protected]>
Co-authored-by: Dimitris Halatsis <[email protected]>
Co-authored-by: Johann Cooper <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Victor Augusto <[email protected]>
Co-authored-by: João Gabriel Quaresma <[email protected]>
jasonsaayman added a commit that referenced this pull request May 28, 2022
* Fixing proxy beforeRedirect regression (#4708)

* Adding Canceler parameters config and request (#4711)

Co-authored-by: Jay <[email protected]>

* Fixed `toFormData` regression bug (unreleased) with Array-like objects serialization; (#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>

* Allow webpack users to overwrite buildins (#4715)

Co-authored-by: Jay <[email protected]>

* Fixed `AxiosError` status code type; (#4717)

Co-authored-by: Jay <[email protected]>

* Fixed `AxiosError` stack capturing; (#4718)

Co-authored-by: Jay <[email protected]>

* allow type definition for axios instance methods (#4224)

Co-authored-by: Jay <[email protected]>

* add `string[]` to `AxiosRequestHeaders` type (#4322)

Co-authored-by: Jay <[email protected]>

* Fixing AxiosRequestHeaders typings (#4334)

Co-authored-by: Shakirov Kirill <[email protected]>
Co-authored-by: Jay <[email protected]>

* Added the ability for the `url-encoded-form` serializer to respect the `formSerializer` config; (#4721)

Added test for `formSerializer` config in context of `url-encoded-form` serializer;

* Updated eslint config; (#4722)

Co-authored-by: Jay <[email protected]>

* fix: add isCancel type assert (#4293)

Co-authored-by: Jay <[email protected]>

* Added data URL support for node.js; (#4725)

* Added data URL support for node.js;
Added missed data URL protocol for the browser environment;
Optimized JSON parsing in the default response transformer;
Refactored project structure;
Added `cause` prop for AxiosError instance that refers to the original error if it was wrapped with `AxiosError.from` method;
Added fromDataURI helper;
Added test for handling data:url as an `arraybuffer|text|stream`;

* Added throwing of 405 HTTP error if the method is not GET;

* Fix/4263/maxbodylength defaults (#4731)

* test(http): add test case for default body length in follow-redirects

* fix(http): provide proper default body length to follow-redirects

Co-authored-by: Jay <[email protected]>

* Adding types for progress event callbacks (#4675)

Co-authored-by: Jay <[email protected]>

* Fixed bug #4727 : toFormData Blob issue on node>v17; (#4728)

* Fixed bug #4727;
Added node 18.x to the CI;
Added hotfix for `ERR_OSSL_EVP_UNSUPPORTED` issue with karma running on node >=17.x;
Added `cross-env` to allow running build and test scripts on Windows platforms;

* Added conditional setting of `--openssl-legacy-provider` option for node versions >=17.x;

* Refactored ssl-hotfix & test script;

* Fixed and refactored default max body length test due to ECONNRESET failure;

* Added test for converting the data uri to a Blob;
Fixed bug with parsing mime type for Blob;

Co-authored-by: Jay <[email protected]>

* URL params serializer; (#4734)

* Refactored BuildURL helper to use URLSearchParams serializer;

* Updated typings;
Added TS test;

* Added `axios.formToJSON` method; (#4735)

* Draft

* Added `formDataToJSON` helper;
Added `axios.formToJSON` method;
Added client tests;

Co-authored-by: Jay <[email protected]>

* Bump grunt from 1.5.2 to 1.5.3 (#4743)

Bumps [grunt](https://github.com/gruntjs/grunt) from 1.5.2 to 1.5.3.
- [Release notes](https://github.com/gruntjs/grunt/releases)
- [Changelog](https://github.com/gruntjs/grunt/blob/main/CHANGELOG)
- [Commits](gruntjs/grunt@v1.5.2...v1.5.3)

---
updated-dependencies:
- dependency-name: grunt
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Updated README.md; (#4742)

Updated index.d.ts;

Co-authored-by: Jay <[email protected]>

* chore: removed Travis CI config file as we have moved to GitHub actions

* chore: updated actions to run on new version based branches

* Fix/4737/timeout error message for http (#4738)

* Fixing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

* Testing timeoutErrorMessage in http calls

When timeoutErrorMessage was set this did not change anything in the error message, with this change the error message will be the configured message

Co-authored-by: Jay <[email protected]>

* Fixing content-type header repeated (#4745)

Co-authored-by: Jay <[email protected]>

Co-authored-by: Maxime Bargiel <[email protected]>
Co-authored-by: 毛呆 <[email protected]>
Co-authored-by: Dmitriy Mozgovoy <[email protected]>
Co-authored-by: Tom Ceuppens <[email protected]>
Co-authored-by: Jelle Schutter <[email protected]>
Co-authored-by: Rraji Abdelbari <[email protected]>
Co-authored-by: Kirill Shakirov <[email protected]>
Co-authored-by: Shakirov Kirill <[email protected]>
Co-authored-by: chenjigeng <[email protected]>
Co-authored-by: Dimitris Halatsis <[email protected]>
Co-authored-by: Johann Cooper <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Victor Augusto <[email protected]>
Co-authored-by: João Gabriel Quaresma <[email protected]>
@rcbevans
Copy link
Copy Markdown

rcbevans commented Oct 7, 2022

After bumping axios to 1.1.0 from 0.27.0 previously working code to upload files using multipart/form-data has broken.

export const FileClient = axios.create({
  baseURL: '/api',
  headers: {
    'Content-type': 'multipart/form-data',
  },
});

...

const formData = new FormData();
formData.append('file', file, file.name);
const result = await FileClient.post<string>(url, formData, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

In the outgoing network request I see that axios 1.1.0 is changing the content-type on the request header to application/x-www-form-urlencoded when previously it was multipart/form-data; boundary=---------------------------398240245425200041711494342241

This is causing my backend to try parse the body with a text parser causing HTTP 413 Payload Too Large errors.

Is this expected behavior?

@jasonsaayman
Copy link
Copy Markdown
Member

Please update to 1.1.2 and please read the additional docs around multipart form data. There have been numerous changes to make this a lot better.

Tiphannie pushed a commit to Tiphannie/axios that referenced this pull request Jul 4, 2025
…s serialization; (axios#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>
Tiphannie pushed a commit to Tiphannie/axios that referenced this pull request Jul 4, 2025
…s serialization; (axios#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>
Tiphannie pushed a commit to Tiphannie/axios that referenced this pull request Jul 4, 2025
…s serialization; (axios#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>
Tiphannie pushed a commit to Tiphannie/axios that referenced this pull request Jul 4, 2025
…s serialization; (axios#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>
Tiphannie pushed a commit to Tiphannie/axios that referenced this pull request Jul 4, 2025
…s serialization; (axios#4714)

Added `toURLEncodedForm` helper;
Added automatic payload serialization to `application/x-www-form-urlencoded` to have parity with `multipart/form-data`;
Added test of handling `application/x-www-form-urlencoded` body by express.js;
Updated README.md;
Added missed param in JSDoc;
Fixed hrefs in README.md;

Co-authored-by: Jay <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants