CODEWITHSUNDEEP
angularjsnode.jsexpresscross-domainjsonp
kawai
kawai

Reputation: 27

AngularJS jsonp call 404 status

I have a simple project on localhost, with a mysql database. I try to show data from database to my web page. To do that I have created a Server.js file, whitch use Express and NodeJS.

var express         =         require("express");
var mysql           =         require("mysql");
var app             =         express();

/*
* Configure MySQL parameters.
*/
var connection      =         mysql.createConnection({
    host        :         "localhost",
    user        :         "root",
    password    :         "root",
    database     :         "dbAngular"
});

connection.connect(function(error){
    if(error)
    {
        console.log("Problem with MySQL"+error);
    }
    else
    {
        console.log("Connected with Database");
    }
});

/*
* Configure Express Server.
*/
app.use(express.static(__dirname + '/app'));
/*
* Define routing of the application.
*/
app.get('/',function(req,res){
    res.sendfile('index.html');
});

app.get('/load',function(req,res){
    connection.query("SELECT * FROM Type",function(err,rows){
        if(err)
        {
            console.log("Problem with MySQL"+err);
        }
        else
        {
            res.end(JSON.stringify(rows));
        }
    });
});

/*
* Start the Express Web Server.
*/
app.listen(3000,function(){
    console.log("It's Started on PORT 3000");
});

My first problem was that my application is set to http://localhost:8000/ and my database request is set to http://localhost:3000/. Cross domain error.

So I try to perform an JSONP call, like this : angular.module('dictionary', ['ngRoute', 'ngResource']) 

angular.controller('DictionaryController',['$scope','$http',DictionaryController]);


function DictionaryController($scope,$http,$templateCache, FacebookFeed) {

    $http.jsonp('http://localhost:3000/load?callback=JSON_CALLBACK')    
        .success(function (data, status, headers, config) {
            alert('success');
        })
        .error(function (data, status, headers, config) {
            alert('error'); // Always goes here
        });

}

I have no error, but the jsonp call always pass to error function, with no data and a 404 status. And if I see on Chrome, Headers tab : 

General
    Request URL:http://localhost:3000/load?callback=angular.callbacks._0
    Request Method:GET
    Status Code:200 OK
    Remote Address:localhost:3000
Response Headers
    Connection:keep-alive
    Date:Tue, 16 Aug 2016 09:37:58 GMT
    Transfer-Encoding:chunked
    X-Powered-By:Express
Request Headers
    Accept:*/*
    Accept-Encoding:gzip, deflate, sdch
    Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
    Connection:keep-alive
    Host:localhost:3000
    Referer:http://localhost:8000/
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Query String Parameters
    callback:angular.callbacks._0

And on Response tab : 

[{"idType":1,"nameType":"DISIT"},{"idType":2,"nameType":"ECO"},{"idType":3,"nameType":"EXT"}]

I don't understand what is wrong with that. I've seen and tested many hypothesis but none of them works for me. Is it a support problem between JSONP and Express/Node API ? (cf : JSONP request gives 404 in Angular app)

Or, do I have to implement Resquest ?

I've tried to allow CORS on Server.js and to implement a factory like in that exemple too, but without success.

Any help on that problem ? I'm really lost...

Thank's in advance.

EDIT Ok, it seems it's not my code that doesn't work... I try two adresses :

  1. http://localhost:3000/load?callback=JSON_CALLBACK
  2. https://graph.facebook.com/cocacola?callback=JSON_CALLBACK

With the first, nothing appears, but with the second, I have the result expected (cf : exemple here). I have a debian virtual machine run on Windows 7. I'm behind a proxy... Any suggestion ?

Upvotes: 0

Views: 986

Answers (1)

kawai
kawai

Reputation: 27

Ok, I found the solution. Thank's Sarathy, you put me on the road.

I inspect the url return with Postman, really really good tools for Google Chrome. So, I figured out that there were a little different :

For the url https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero I have this result :

{
  "name": "Super Hero",
  "salutation": "Helo",
  "greeting": "Helo Super Hero!"
}

With my url http://localhost:3000/load?callback=JSON_CALLBACK, I have this : 

[{"idType":1,"nameType":"DISIT"},{"idType":2,"nameType":"ECO"},{"idType":3,"nameType":"EXT"}]

The first is reconized as a json by postman, and the second as html. So I modified my return in Server.js like this : 

app.get('/load',function(req,res){
    connection.query("SELECT * FROM Type",function(err,rows){
        if(err)
        {
            console.log("Problem with MySQL"+err);
        }
        else
        {
            console.log("OK");
            res.jsonp(rows);
        }
    });
});

And now everything works fine ;)

Hope this can help someone else.

Upvotes: 1

Related Questions