Search code examples
javascriptgoogle-chromefetch-api

Increase Maximum body size for the fetch api in chrome


I am trying to upload large files using the Fetch API and I'm running into a problem when I post data larger than 128MB in chrome and 256MB in Firefox. My question is is there anyway to increase this maximum through a configuration in either chrome or firefox? Am I just doing it wrong? Is there a better alternative for posting large data asynchronously?

Here's a short example that shows the problem: https://jsfiddle.net/hspw4bzo

function performFetch() {
    const megabytes = document.getElementById( 'megabytes' ).value * 1;
    const largeString = (new Array(megabytes * 1024 * 1024 )).join("x");

    const options = {
      redirect: 'follow',
      method: 'POST',
      body: largeString
    };

    fetch( 'https://jsfiddle.net/', options ).then( () => {
      console.log( 'success' )
    } )
  }

When you hit the "Go" button it'll initiate a POST request with a body thats 128MB in size. In chrome this causes the frame to crash.


Solution

  • I found that when posting a large amount of data the use of a Blob mitigates the out of memory error thrown by firefox and the crashing in chrome. I arrived at Blob usage after viewing other answers here and here

      function performFetch() {
        const megabytes = document.getElementById( 'megabytes' ).value * 1;
        const largeString = (new Array(megabytes * 1024 * 1024 )).join("x");
    
        const options = {
          redirect: 'follow',
          method: 'POST',
          body: new Blob( [ largeString ], { type: 'text/plain' } )
        };
    
        fetch( 'http://example.com', options ).then( () => {
          console.log( 'success' )
        } )
      }