Question

我在localhost上部署了一个REST API，其中包含以下GET端点：localhost:9000/get-events/1

当我通过邮递员或网络浏览器发送请求时，此端点返回正确的响应。它还包含CORS头文件等，我还使用适当的头文件处理了选项请求。（服务器在Play Framework中实现）。

Postman对上述GET请求的回复是：

标题

Access-Control-Allow-Origin →*
Content-Length →34
Content-Security-Policy →default-src 'self'
Content-Type →application/json
Date →Tue, 10 Apr 2018 04:50:16 GMT
Referrer-Policy →origin-when-cross-origin, strict-origin-when-cross-origin
X-Content-Type-Options →nosniff
X-Frame-Options →DENY
X-Permitted-Cross-Domain-Policies →master-only
X-XSS-Protection →1; mode=block

体：

{
    "status": "success",
    "events": "[<some list....>]"
}

当用户导航到我的“事件列表”页面时，我基本上希望将服务器返回的列表加载到ng-repeat列表中。我在我的代码中实现了这个：

在app.js：

中的控制器内部

$scope.getlist = function() {
    $http({
        url: 'localhost:9000/get-events/1',
        method: 'GET'
    }).then(function (response) {
        console.log('SUCCESS: ' + JSON.stringify(response));
        $scope.events = JSON.parse(response.data.events);
    }, function (response) {
        console.log('ERROR: ' + JSON.stringify(response));
    });
}

并在前端，index.html：

<a href="eventList.html" ng-click="getlist()">Fetch List</a>

和eventList.html：

<ul>
    <li data-ng-repeat="event in events">{{event.name}}</li>
</ul>

当我点击链接时，它会在浏览器的控制台中显示以下错误：

ERROR: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"localhost:9000/get-events/1","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}

从服务器日志中，似乎请求根本没有到达服务器。

奇怪的是，我也在向同一台服务器发送POST请求，同时进行用户登录，并且该请求成功到达服务器并正确地给出了来自angularJS应用程序的响应。

这就是我从angularjs控制器调用POST的方式：

$scope.login = function () {
    console.log('login called');
    var loginURL = 'localhost:9000/login';
    var loginInfo = {
        'email': $scope.email,
        'password': $scope.password
    };
    $http({
        url: loginURL,
        method: 'POST',
        data: loginInfo,
        headers: { 'Content-Type': 'application/json' }
    }).then(function successLogin(response) {
        console.log('SUCCESS: ' + JSON.stringify(response));
    }, function failLogin(response) {
        console.log('ERROR: ' + JSON.stringify(response));
    });
}

在执行GET请求时我错过了什么？

Answer 1

在服务器中你是否在服务器端添加了CORS头Access-Control-Allow-Origin？

Answer 2

    Its Working for me

    try this.

    html:
     <a  ng-click="getlist()">Fetch List</a>

    js:

     $scope.getlist = function () {
                $http({
                    url: 'ControllerName/getevents/1',
                    method: 'GET'
                }).then(function (response) {
                    console.log('SUCCESS: ' + JSON.stringify(response));
                }, function (response) {
                    console.log('ERROR: ' + JSON.stringify(response));
                });
            }

output in console:

SUCCESS: {"data":"","status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"Employee/getevents/1","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK","xhrStatus":"complete"}

Answer 3

所以，我之前使用Firefox运行我的Angular App，我只是想使用Google Chrome。它通过在控制台中提供这些额外信息帮助我：

Failed to load localhost:9000/volunteer-events/1: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

所以，似乎在HTTP获取网址中我只使用localhost:9000...而不是完整的http://localhost:9000...

将我的网址更改为http://localhost:9000...解决了问题。

在这里回答这个问题，以便像我一样长时间坚持这一点的其他人都能从中受益！

虽然我仍然不确定它对POST是如何起作用的？

$ http GET请求无法从AngularJS应用程序到达服务器

3 个答案: