为什么我无法使用angularjs $ http.get（）从服务器获取数据？

Question

这个问题应该很清楚，我的代码应该显示该问题。 任何问题都请在下面发表评论。

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'的文件中获取数据。

Answer 1

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

Answer 2

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

1. 给出错误的路径。
2. 路径中的拼写问题。

$ 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。

Answer 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 Data

Answer 4

我自己的问题现在似乎正在起作用。 我不知道发生了什么，我认为使用联机工作区和虚拟机来运行服务器时存在稳定性问题，即使不应该这样做。 感谢大家的投入，我仍然设法获得了一些有用的信息。