Ajax query response with success but it fires error

Question

I am new to mongodb, I am using Express, Body-Parser and Mongoose and I have a mongodb database (its online, its call mlab) where i pull data from. Every thing is working fine, i have used postman to Get, Post and Delete. I am trying to get the data in JavaScript so i can display in the html. I am using Ajax, it works and returns success, but fires the fail function of the Ajax.

The mongdb controller

exports.photoalbum_all = function (req, res, next) {
PhotoAlbum.find(({}), function (err, photoalbum) {
    if (err) return next(err);
    res.send("../Views/images", {photo: photoalbum});
});};

The Ajax call I'm making

                    function getPhoto() {
                        var photoAdd = 'http://localhost:1234/photoalbums/find'; 
                        $.ajax({
                            header: 'Access-Control-Allow-Origin: *',
                            dataType: "jsonp",
                            url: photoAdd,
                            contentType: 'application/json; charset=utf-8',
                            async: false,
                            crossDomain: true,
                            success: AjaxSucceeded,//callback,
                            error: AjaxFailed
                        });
                    }
                    function AjaxSucceeded(result) {
                        alert("hello");
                        alert(result);
                    }
                    function AjaxFailed(result) {
                        debugger;
                        alert("hello1");
                        alert(result.statusText);
                    }
                    getPhoto();

At first i got errors about ajax cross-origin request blocked so i had to use datatype: 'jsonp'. Like i said, when i check in the network of the chrome browser console, i get the success and this address:

http://localhost:1234/photoalbums/find?callback=jQuery111202567313069615542_1545928466705&_=1545928466706

which returns this Json values

[{"_id":"5c22a5ffcb29611f905f756b","title":"prayer","albums":[{"_id":"5c22a5ffcb29611f905f756c","u_name":"family01","u_title":"family_man"}],"createdAt":"2018-12-25T21:49:51.091Z","updatedAt":"2018-12-25T21:49:51.091Z","__v":0},{"_id":"5c22a66bd3527c39342fafe7","title":"prayer","albums":[{"_id":"5c22a66bd3527c39342fafe8","u_name":"family01","u_title":"family_man"}],"createdAt":"2018-12-25T21:51:39.274Z","updatedAt":"2018-12-25T21:51:39.274Z","__v":0}]

i have exhausted myself researching but to no avail, i am suspicious though, could the Json response i'm getting from mlab be the problem, i mean the formatting. I am open to any ideas. Thanks for your help in advance.

You can only use JSONP if your endpoint actually serves JSONP. You need to learn how to use CORS. — SLaks, Dec 27 '18 at 16:53
I didnt understand that, do you mean because i am using the online mlab — Akinnifesi Damilola, Dec 27 '18 at 17:02

score 0 · Accepted Answer · answered Dec 27 '18 at 17:09

0

There is nothing to do on the client side more than JSONP. You need to enable CORS on your localhost if you want to use a proper Ajax JSON call to the server.

Here are some tutorials on how to do it Deadly CORS when http://localhost is the origin

You can also google it : Enable CORS on localhost

Hope this helps

answered Dec 27 '18 at 17:09

Luchian Chivoiu

300
4
14

I looked at it, very useful documentation and for some reason i still cant find a work around. the Cors chrome tool doesnt seem to work. still getting errors – Akinnifesi Damilola Dec 27 '18 at 17:47
1

I am very grateful, it worked, i had to do a empty cache and hard reload, and use the javascript XMLHttpRequest. Please advice, is it ok to use ajax to pull data from mongodb – Akinnifesi Damilola Dec 27 '18 at 17:57
1

Now it works with Ajax, i hate you chrome but i still love you. – Akinnifesi Damilola Dec 27 '18 at 18:02

Ajax query response with success but it fires error

1 Answers1