带有 Angular 的 NodeJs API 不返回 JSON 结果

Posted 2023-03-04

【中文标题】带有 Angular 的 NodeJs API 不返回 JSON 结果

【英文标题】：NodeJs API with Angular does not return JSON result

【发布时间】：2016-09-21 04:08:43

【问题描述】：

更新：我尝试了另一个 API：http://www.omdbapi.com/?t=Sherlock

而且 GET 有效。但是，我仍然不确定为什么我的 node.js 服务器 API 不适用于此方法。

---

我目前正在开发一个应用程序的后端，我为该应用程序创建了一个类似于教程的 API：https://codeforgeek.com/2015/03/restful-api-node-and-express-4/。

但是，我似乎无法让我的 ionic angular 应用程序来检索我的 JSON 结果。当我将 get 命令放在 Postman 上时，我得到：

["floor":3]

我的控制器是：

   $http(url:"http://localhost:3000/api/fl",method:'GET')
    .then(function(response) 
          $scope.status = response.status;
          $scope.data = response.data;
          $log.log("success");
          $log.log("res:"+ response);
        , function(response) 
          $scope.data = response.data || "Request failed";
          $scope.status = response.status;
          $log.log("failed");
          $log.log("res:"+ response);
      );

 $log.log("status: "+$scope.status); 
 $log.log("data: "+$scope.data);

（我的 /fr 引用了在我的节点服务器上具有 GET 方法的 JSON）

并且总是给出“失败”、“状态：未定义”以及“数据：未定义”的结果。当我递归这个方法时，它给了我一个“状态：0”。

我也尝试过使用 $resource，但没有成功。 任何指导将不胜感激。我的 API 没有任何身份验证，我认为它与 CORS 没有任何关系（除非你们认为它有）。

编辑： 这是我 server.js 上的 get 方法：

//GET Floor
 router.get("/fl",function(req,res)
        var query = "SELECT floor FROM stor1 WHERE id=0";

        connection.query(query,function(err,rows)
            if(err) 
                res.json("Error" : true, "Message" : "Error executing mysql query");
             else 
                res.json(rows);
            
        );
    );

EDIT2： 好吧，我添加了更多日志来显示结果，现在我从响应中得到了一个 [object Object]。对象是： "data":null,"status":0,"config":"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:3000/api/fl","headers":"Accept":"application/json, text/plain,*/*","statusText":""

【问题讨论】：

你试过$log.log(response)吗？检查响应的内容。

你的回应是什么

["floor":3] 这是访问数据的错误方式

$log.log(response) = 未定义。好吧，Wasiq，我只是想从“GET”方法中获取 JSON。

你能把$log.log(response) 代替$log.log("success") 和$log.log("failed"); 放在你的控制器中吗？

【参考方案1】：

您的邮递员似乎收到了GET 请求的响应，这意味着您的服务器端代码可以很好地进行路由。但是您的 Angular 应用程序无法在服务器端抛出任何错误的情况下获得任何响应。这似乎是 CORS

的情况

var cors = require('cors');    
app.use(cors());

注意：在您的第一个路由之前使用此中间件。

【讨论】：

谢谢！不敢相信我已经坚持了一整天！当我需要做的只是在我的 server.js 上安装 npm 时。我现在很开心。我要在院子里闲逛一下。

这件事一生都来一次。原因是您的 node.js 服务器与托管 angularJS 应用程序的客户端服务器分开。因此，您的浏览器不允许您访问不同域的内容。因此我们通过 cors 中间件添加了一个 header Access-Control-Allow-Origin。

【参考方案2】：

还有一种方法可以制作 Access-Control-Allow-Origin

app.use(function(req, res, next) 
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
);

【讨论】：

是的，但是如何将它添加到“GET”方法中？

你不需要在GET请求中做任何事情。

【参考方案3】：

尝试为成功和错误回调函数添加名称，如下所示：

$http(url:"http://localhost:3000/api/fl",method:'GET')
.then(function successCallBack(response)  // Add 'successCallBack' function name
      $scope.status = response.status;
      $scope.data = response.data;
      $log.log("success");
      $log.log("res:"+ response);
    , function errorCallBack(response)  // Add 'errorCallBack' function name
      $scope.data = response.data || "Request failed";
      $scope.status = response.status;
      $log.log("failed");
      $log.log("res:"+ response);
  );

$log.log("status: "+$scope.status); 
$log.log("data: "+$scope.data);

【讨论】：

并没有真正改变结果。我本地托管的 API 仍然拒绝提供。

添加名称不会改变任何东西，因为 javascript 指向第一个参数的引用作为successCallBack，第二个参数作为errorCallBack 与名称无关。