如何在angularjs中调用rest API

Posted 2023-03-31

【中文标题】如何在angularjs中调用rest API

【英文标题】：how to Call restAPI in angularjs

【发布时间】：2016-11-03 09:59:49

【问题描述】：

我是新的 AngularJs，如何使用 Visual Stduio 2013 调试 angularjs 中的代码，我在 Angular 中调用 RestAPI 但数据不显示，请帮助我。请检查下面的代码和图片。

    var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) 
            $http.get("http://localhost:9000/employees").then(function (response) 
                $scope.myData = response.data;

            );
        );

<!-- language: lang-html -->

      <div ng-app="myApp" ng-controller="customersCtrl">
            <pre>myData | json</pre>

            <p>Today's welcome message is:</p>

            <ul>
                <!--<li ng-repeat="x in myData">
                     x.name + ', ' + x.Fname 
                </li>-->
            </ul>


        </div>

【问题讨论】：

How to access the services from RESTful API in my angularjs page?的可能重复

【参考方案1】：

问题是cross-domain origin policy。请务必在webserver 中运行您的 index.html，而不仅仅是在浏览器中相对加载它。

如果您安装了 python，请转到 index.html 所在的文件夹并运行以下命令。

python -m SimpleHTTPServer 3000

然后在您的浏览器中启动http://localhost:3000，您应该没有任何问题。

【讨论】：

我没有python

@AdeelKhan：使用任何网络服务器......它可以是 xampp 或 python 或节点 http.server

我创建了网络服务器，但它显示相同的错误 Origin '192.168.1.102:8080' 因此不允许访问。

localhost:9000，它在 9000，而你在 8080...保持客户端/服务器相同...

【参考方案2】：

另一个有用的选项是使用其中一个 npm 包中的 http-server。

https://www.npmjs.com/package/http-server

【讨论】：

在您的后端，允许所有的 CORS 请求，即将 Access-Control-Allow-Origin 设置为 *