Question

我第一次使用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（禁止）
请求的资源上没有“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。响应具有HTTP状态代码403。

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

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

Bloccata richiesta multiorigine（cross-origin）：il criterio di corrispondenza dell'origine non consente la lettura della risorsa remota da http://www.mocky.io/v2/5a1fede63100005d1ec0b08f。 Motivo：标题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"}

请帮帮我。

由于

Answer 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

Answer 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}
);

GET调用休息API的问题

2 个答案: