GET调用rest API的问题答案

【问题标题】：Problems with GET call to rest APIGET调用rest API的问题
【发布时间】：2018-05-14 08:43:42
【问题描述】：

我第一次使用 angularJs，我会做一件非常简单的事情，但我不知道我做错了什么。我的代码在我的本地环境中，API 在网络上（我使用免费工具创建了一个简单的 API）。

我创建了这个简单的 API：http://www.mocky.io/v2/5a1fedce310000221bc0b08b

{"id" : 1, "name" : "France - Mainland", "desc": "some description" },
{"id" : 2, "name" : "Gibraltar", "desc": "some description"},
{"id" : 3, "name" : "Malta", "desc": "some description"}

现在我有了我的 app.js

(function () {
'use strict';

angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
    $scope.selectedTestCountry = null;
    $scope.testCountries = [];


    $http({
            method: 'GET',
            url: 'http://www.mocky.io/v2/5a1fede63100005d1ec0b08f',
            data: { someId: 3 }

        }).then(function (result) {
            $scope.testAccounts = result;

        }).catch(function (err) { 
            $scope.error = err}
    );
});
})()

问题是，当调用时，我得到了一个错误。

在 Chrome 中我收到了这个错误：

加载资源失败：服务器响应状态为 403 (Forbidden)
请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。响应的 HTTP 状态代码为 403。

我读到一些建议更改浏览器的内容，例如使用 FF。

但在 FF 中我还有一个错误：

Bloccata Richiesta multiorigin (cross-origin): il criterio di corrispondenza dell'origine non consente la lettura della risorsa remota da http://www.mocky.io/v2/5a1fede63100005d1ec0b08f。动机：标题 CORS “Access-Control-Allow-Origin” mancante。（抱歉是意大利语，但这意味着 CORS 存在一些问题）

最后，如果我在 catch 中打印错误，我得到了这个：

{"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://www.mocky.io/v2/5a1fede63100005d1ec0b08f","data":{"applicationId":3},"headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

请帮帮我。

谢谢

【问题讨论】：

标签： angularjs cors

【解决方案1】：

Access-Control-Allow-Origin 由于不同的域而出现。可能你正在http://localhost 或http://127.0.0.1 上运行应用程序

此域与http://www.mocky.io/ 不同，因此它会阻止请求。

要解决这个问题，您应该检查https://stackoverflow.com/a/38112602/1006780

我也注意到这是一个月前修复的 https://github.com/julien-lafont/Mocky/issues/13#issuecomment-338432249

【讨论】：

您好，感谢您的回复。我创建了一个简单的 html 文件和 javascript。我不在本地主机中，只需双击即可打开文件。所以，我从 c:/myTest/index.html 在浏览器中打开文件
这就是问题所在，使用网络服务器（如 wamp 或 xampp 或 nodejs 服务器或任何其他网络服务器）打开它。
@Gjord83 如果可以解决您的问题，请接受答案。

【解决方案2】：

您需要将 javascript 对象 发送到客户端。

示例 API 结果：

{
    "data": [
        {"id" : 1, "name" : "France - Mainland", "desc": "some description" },
        {"id" : 2, "name" : "Gibraltar", "desc": "some description"},
        {"id" : 3, "name" : "Malta", "desc": "some description"} 
    ],
    "error" : {
        "message" : "",
        "status" : 0
    }
}

角度示例的结果：

$http({
    method: 'GET',
    url: 'http://www.mocky.io/v2/5a1fede63100005d1ec0b08f',
    data: { someId: 3 }

}).then(function (result) {
    if(result.error){
        console.error(result.error);
    }else{
        $scope.testAccounts = result.data;
    }

}).catch(function (err) { 
    $scope.error = err}
);

【讨论】：