Angularjs $http.get 方法不起作用答案

【问题标题】：Angularjs $http.get method not workingAngularjs $http.get 方法不起作用
【发布时间】：2013-12-11 08:06:38
【问题描述】：

您好，我有一个在 8501 端口上运行的微服务。

@RestController
@RequestMapping("/feeds")
public class FeedsController {

    @RequestMapping(method = GET)
    ResponseEntity<?> findAllFeeds() {
        return new ResponseEntity<String>("Hello", OK);
    }


}

当我添加 url http://localhost:8501/feeds 时，浏览器显示“Hello”。现在我正在尝试通过 angularjs get call 访问它

在我的 AngularJs 中，我的代码是

'use strict';

var app = angular.module('commentsjsApp');
app.controller('MainCtrl', function ($scope,$http) {

    $http.jsonp('http://localhost:8501/feeds').success(function(data, status, headers, config){
    console.debug("Data : "+data+ "Status");
}).error(function(){
    console.debug("error");
});

编辑：在网络选项卡（萤火虫）中，我可以看到状态为 200 的 GET，响应为“Hello”。为什么我在控制台中收到错误？谁能帮帮我。

当我运行这个 angularjs 应用程序时。如图所示，控制台上的以下输出

【问题讨论】：

如果您的 html 页面不是从 localhost:8501 提供的，那么我认为您正在违反跨域获取数据的限制。您可能需要CORS 或 jsonp 来传输您的数据。
@musically_ut 感谢您的回复，我现在更新了我的问题。你现在可以检查一下吗

标签： javascript http angularjs spring-mvc get

【解决方案1】：

您正在请求 JSONP 数据，但服务器正在返回 string。从服务器返回一个正确的 JSON 对象来解决问题。

注意：Hello world 不是有效的 JSON，但"Hello World" 是。

【讨论】：

我已经更新了问题，因为我可以看到“你好”作为响应（在萤火虫的网络选项卡中检查时）

【解决方案2】：

您需要在响应中添加标题“Access-Control-Allow-Origin”，因为您从 localhost:9000 调用到 localhost:8501（它们在技术上是不同的服务器）。

@RequestMapping(method = GET)
ResponseEntity<?> findAllFeeds(HttpServletRequest httpRequest,
        HttpServletResponse httpResponse) {

    httpResponse.addHeader("Access-Control-Allow-Origin",
            "http://127.0.0.1:9000");        

    return new ResponseEntity<String>("Hello", OK);
}

【讨论】：

【解决方案3】：

有时 Angular 需要引用 URL 中的冒号，试试这个：

$http.get('http://localhost\\:8501/feeds').success(function(data, status, headers, config){
        console.debug("Data : "+data);
    }).error(function(){
        console.debug("error");
    });

【讨论】：

您可以尝试从服务器返回格式正确的 JSON，例如 return new ResponseEntity<String>("{value: 'Hello'}", OK);。