Angular JS sending array of base64 to NodeJs server- Allow-Access-Control-Origin

Question

I am trying to send an array of base64 string from my Client Side(AngularJs) to my NodeJs Server. I am encountering in a weird situation. whenever I send Object Like this:

{Price: 1000000, LookingFor: "Rent", RoomsNumber: 4, Area: 1000, PropertyType: "Any", Base64:['data:image/jpeg;base64,/9..'] }

I Get an error like this:

XMLHttpRequest cannot load http://localhost:8080/estate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 413.

And when I remove the base64 the http request is working. Also when I send only one string of base 64 to server, the server accepts it.

in client side I am using angular $http :

self.PostEstate = function (estate) {
            console.log(serverLocation + 'estate');
            console.log('sending estate', estate);
            $http.post(serverLocation + 'estate', estate)
                .success(function (data) {
                    console.log('successfully sent estate', data);
                    $rootScope.$broadcast('postEstate', {
                        IsSucceded: true,
                        _id: data
                    })
                }).error(function (err) {
                    $rootScope.$broadcast('postEstate', {
                        Msg: err,
                        IsSucceded: false
                    })
                });
        }

And in my server I am using simple routing of my app:

app.post('/estate', function (req, res) {

    var estate = new Estate({
        Price: req.body.Price,
        LookingFor: req.body.LookingFor,
        RoomsNumber: req.body.RoomsNumber,
        Area: req.body.Area,
        PropertyType: req.body.PropertyType,
        Desc: req.body.Desc,
        photos: []
    });

    //Thats mongoose obj
    estate.save(function (err) {
        if (err)
            res.send(err);

        res.json({
            _id: estate._id
        });
    });
});

I thinking that the post request is too big,can I remove the limit? If not can you suggest another architecture that I can send base64 array to my server? Thank you in advance. PS Just Mention that I use node 10 with express 4.

Answer 1

Your server tells you what's wrong:

The response had HTTP status code 413.

which translates to Request Entity too large

As it looks like you want to upload images, why don't you simply use multipart/form-data to do so? Do you really have to send a base64 encoded string?

See this tutorial for example: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

If you really need to send a string you can increase the limit in the body-parser middleware: Node.js Express. Large body for bodyParser