为什么我无法使用 angularjs $http.get() 从服务器获取数据？答案

【问题标题】：Why am I failing to get data from the server using angularjs $http.get()?为什么我无法使用 angularjs $http.get() 从服务器获取数据？
【发布时间】：2016-10-25 11:01:20
【问题描述】：

问题应该足够清楚，我的代码应该会显示问题。有什么问题可以在下方评论。

app.js

var express = require('express');
var app = express();

app.use(express.static('public'));



var characters = {"Griffins": 
    [{"Name":"Lois Griffin",
    "Gender":"Female",
    "Role": "Mother"},

    {"Name":"Chris Griffin",
    "Gender":"Male",
    "Role": "Son"},

    {"Name":"Meg Griffin",
     "Gender":"Female",
     "Role": "Daughter"}]     
 };

app.get("/characters", function(req, res) {
    res.send(characters);
})

app.listen(9000, function(){
    console.log('Running');
});

angular.js

app.controller('listCtrl',function($scope, $http){

    $scope.characterData = function() {
        $http.get("/characters").then(function(data) {
            console.log(data, 'success')
        },function(data) {
            console.log("data, failure.")
        })
    }
})

错误

Failed to load resource: the server responded with a status of 404 (
Object "failure."

对象出错

Object -
config : Object
data : "Cannot GET /characters↵"
headers : function (d) 
status : 404
statusText : "Not Found"
__proto__ : Object

注意：使用 $http.get('characters.json')... 时，我可以从名为 'character.json' 的文件中获取数据。

【问题讨论】：

试试 res.json(characters);而不是 res.send
不幸的是仍然收到同样的错误
您是否尝试直接从浏览器访问 /characters？你也可以试试 cUrl。

标签： javascript angularjs node.js express get

【解决方案1】：

404 是服务器在找不到资源时发送的代码。导致 404 响应的原因可能有很多，但最常见的原因是：

给出了错误的路径。
路径中的拼写问题。

$http.get(url, [config]) ：有 2 个参数被接受。 url 是绝对/相对路径。这就是为什么使用 $http.get('characters.json') 而不是 $http.get('/characters') 的原因。

因此，您应该改用正确的路径。如果 'characters.json' 在 '\characters' 目录中，你应该给出正确的路径 $http.get('\characters\characters.json') 以便服务器可以找到文件。

而且，由于您要发送 json 数据，因此您应该使用 res.json 而不是 res.send。

【讨论】：

如果您有一两分钟的时间，请观看此短片。这就是我编写代码的基础。 youtube.com/watch?v=xNfzLbRhamI

【解决方案2】：

angular中的get方法需要完整的url字符串，大概是这样的：

app.controller('listCtrl',function($scope, $http){
var serverHost = 'example.com';
var serverPort = '9000';

$scope.characterData = function() {
    $http.get("http://'+serverHost+':'+serverPort+'/characters").then(function(data) {
        console.log("success");
        console.log(data);
    },function(data) {
        console.log("failure");
        console.log(data);
    })
  }
});

【讨论】：

这不是一个选项，因为我使用的是在线工作区（codenvy），但是根据这个问题的结果，这应该不是问题 - stackoverflow.com/questions/34007032/…
@Danilo Velasquez，这不是真的，它应该只适用于/characters。请参考this
您是否尝试连接到 api 服务器？

【解决方案3】：

制作characters.json文件并在app.js中修改app.get方法

app.get('/characters', function (req, res) {
   // First read existing users.
   fs.readFile( __dirname + "/" + "characters.json", 'utf8', function (err, data) {
      data = JSON.parse( data );

      console.log( data );
      res.end( JSON.stringify(data ));
   });
})

//change your server configuration

var server = app.listen(8089, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)

})

你可以在你的html页面中获取Json数据

【讨论】：

【解决方案4】：

我自己的问题现在似乎正在解决。我不知道发生了什么，我认为使用在线工作空间和虚拟机运行服务器存在稳定性问题，即使不应该存在。谢谢大家的意见，我还是捡到了一些好资料。

【讨论】：