在浏览器中无法获取angularJS的输出

时间:2020-08-23 15:56:16

标签: javascript angularjs spring-boot

我正在尝试在angularJS中使用http.get和http.post方法。我的html页面和js文件如下,

<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="./../js/app.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
  <p>Username : <input type="text" ng-model="name"></p>
   <p>Quote : <input type="text" ng-model="quote"></p>

  <button ng-click="ctrl.add();" name="button"  type="button">Add</button>
  <button ng-click="ctrl.retrieve();" name="button" type="button">Retrieve Price</button>
    <p>The results here</p>

<table>
  <tr>
  <th>Quote</th>
  <th>Price</th>
  </tr>
  <tr ng-repeat="q in quotes"> 
    <td>{{q.quote}}</td>
    <td>{{q.price}}</td>
    </tr>
  </table>


</div>

</body>
</html> 

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.timeout = 20000;
}])
app.controller('myCtrl', function($http, $scope) {

    this.retrieve = function() {
    $http.get('http://127.0.0.1:8302/api/stock-service/rest/stock/' + $scope.name)
    .then(function (response) {
        console.log('inside'+ response);
        $scope.quotes = response.data;
    }, function (response) {
        console.log('came here');
    });
    }

    this.add = function() {
        var message = {
            userName: $scope.name,
            quotes: [$scope.quote]
        }
        $http.post('http://127.0.0.1:8302/api/db-service/rest/db/add', message)
            .then(function(response) {
                $scope.quotes = response.data;
            }, function(response) {
                console.log('error..');
            });
    }
}); 

但是我在浏览器中找不到输出。实际上,我可以看到该请求正在通过特定的uri发送。我确信它至少可以在后端的http.get方法中工作,但是我不知道为什么我没有得到输出。 在命令行中,我可以看到如下内容,

2020-08-23 16:42:38.871信息20060 --- [nio-8301-exec-6] y.quotes.query1v7.QuotesRequest:发送请求:https://query1.finance.yahoo.com/v7/finance/quote?symbols=GOOG

谢谢。

1 个答案:

答案 0 :(得分:0)

最后,我可以通过在Google chrome中添加跨域CORS扩展名来解决此问题。

cross domain CORS extension

可能是一个临时解决方案。