AngularJS jsonp调用404状态

Posted 2023-03-03

【中文标题】AngularJS jsonp调用404状态

【英文标题】：AngularJS jsonp call 404 status

【发布时间】：2016-12-22 16:12:08

【问题描述】：

我在 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('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
        );

我没有错误，但是 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 之间是否存在支持问题？ （参见：JSONP request gives 404 in Angular app）

或者，我必须实现Resquest 吗？

我尝试在 Server.js 上允许 CORS 并在 exemple 中实现类似的工厂，但没有成功。

对这个问题有什么帮助吗？我真的迷路了……

提前致谢。

编辑 好的，看来不是我的代码不起作用...我尝试了两个地址：

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

对于第一个，什么都没有出现，但是对于第二个，我得到了预期的结果（参见：exemple here）。 我有一个在 Windows 7 上运行的 debian 虚拟机。我在代理后面...有什么建议吗？

【问题讨论】：

在你的节点 Server.js 文件中，尝试返回 res.jsonp(JSON.stringify(rows)) 而不是 res.end()

不，我与 res.jsonp 的结果相同。

【参考方案1】：

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

我使用 Postman 检查返回的 url，这对于 Google Chrome 来说是非常好的工具。所以，我发现有一点不同：

对于 url 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);
        
    );
);

现在一切正常；）

希望这可以帮助其他人。