Fetch Post - Payload Too Large

I am posting data to a service. The data is an image ( base64 ). This works fine when using small images. But when I use bigger ones, I get the following Error: Payload Too Large

How can I code it so that the I can send larger images? Just sending the url of the image is not a option. I have to send the image in base64.

This is my code located in the backend:

export function getImageId(imageData, style) {

//console.log("Getting called");

return new Promise((resolve, reject) => {
    imageData = imageData.replace("data:image/png;base64,", "")
    console.log(imageData)
    
    var dataPost = {
        "styleId": style,
        "imageBase64Encoded": imageData,
    }
    
    fetch("url", {
        method: "post",
        headers: {
            "x-api-key": "api-key",
            "Content-Type": "application/json",
         },
        body: JSON.stringify(dataPost)
    })
    .then((httpResponse) => {
        console.log(httpResponse.bodyUsed)
    if (httpResponse.ok) {
        return httpResponse.json();
    } else {
        return httpResponse.json();
        //return Promise.reject("Fetch did not succeed");
        }    
    })
    .then((json) => {
        console.log("Data")
        console.log("Json", json)
        resolve(json)
    })
    .catch((err) => {console.log(err)});
    })
}

You can do a quick search yourself and find posts about it online.
https://www.wix.com/corvid/forum/community-discussion/error-431-request-header-fields-too-large
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/413
https://github.com/KillerCodeMonkey/ngx-quill/issues/42
https://github.com/expressjs/body-parser#limit
https://evertpot.com/http/413-payload-too-large
https://github.com/apostrophecms/apostrophe/issues/1291
https://github.com/expressjs/body-parser/issues/235
https://stackoverflow.com/questions/50304779/payloadtoolargeerror-request-entity-too-large
https://gist.github.com/Maqsim/857a14a4909607be13d6810540d1b04f
https://www.wikitechy.com/errors-and-fixes/javascript/error-request-entity-too-large
https://blogs.blackmarble.co.uk/rfennell/2012/10/31/403-and-413-errors-when-publishing-to-a-local-nuget-server/

Yes, I did that of course before posting this. I did not find a solutionā€¦ Hoped that maybe someone here has faced the same issue beforeā€¦

I found the problem. It had nothing to do with the post to the other service. The problem was sending the data from the fronted to the backend.

1 Like