AngularJS jsonp调用404状态

时间:2016-08-16 10:18:41

标签: angularjs node.js express cross-domain jsonp

我在localhost上有一个简单的项目,带有一个mysql数据库。我尝试将数据从数据库显示到我的网页。 为此,我创建了一个Server.js文件,使用Express和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");
});

我的第一个问题是我的应用程序设置为http://localhost:8000/,我的数据库请求设置为http://localhost:3000/。跨域错误。

所以我尝试执行JSONP调用,如下所示:     angular.module('字典',[' 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
        });

}

我没有错误,但jsonp调用总是传递给错误函数,没有数据和 404状态。如果我在Chrome上看到标题标签:

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

在“响应”标签上:

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

我不明白这有什么问题。我已经看过并测试了许多假设,但它们都不适合我。 它是JSONP和Express / Node API之间的支持问题吗? (cf:JSONP request gives 404 in Angular app

或者,我是否必须实施Resquest

我试图在Server.js上允许使用CORS并实现类似exemple的工厂,但没有成功。

有关该问题的任何帮助?我真的输了......

提前感谢。

修改 好吧,似乎不是我的代码不起作用......我尝试了两个地址:

  1. http://localhost:3000/load?callback=JSON_CALLBACK
  2. https://graph.facebook.com/cocacola?callback=JSON_CALLBACK
  3. 第一个没有出现,但是第二个,我有预期的结果(cf:exemple here)。 我在Windows 7上运行了一个debian虚拟机。我在代理后面......有什么建议吗?

1 个答案:

答案 0 :(得分:1)

好的,我找到了解决方案。谢谢Sarathy,你让我走在路上。

我使用Postman检查网址返回,这对Google Chrome来说确实是非常好的工具。所以,我发现有一点不同:

对于网址https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero,我有以下结果:

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

使用我的网址http://localhost:3000/load?callback=JSON_CALLBACK,我有这个:

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

第一个被邮递员重新统一为json,第二个被重新命名为html。所以我修改了我在Server.js中的返回,如下所示:

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);
        }
    });
});

现在一切正常;)

希望这可以帮助别人。