Problems with GET call to rest API

Question

I am using, for the first time, angularJs and I would do a thing very simple, but I don't know what I wrong. I have my code in my local env and the API is on web (I used free tool to create a simple API).

I created this simple API: http://www.mocky.io/v2/5a1fedce310000221bc0b08b

that return:

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

Now I have my 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}
    );
});
})()

The problem is, when the call is made, I got an error.

From Chrome I got this error:

Failed to load resource: the server responded with a status of 403 (Forbidden)
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

I read something that suggest to change browser, for example use FF.

But in FF I have an other error:

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: header CORS “Access-Control-Allow-Origin” mancante. (sorry is in italian, but it means there are some issue with CORS)

In the end, if I print the error in catch, I got this:

{"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"}

Please help me.

Thanks

score 1 · Accepted Answer · answered Nov 30 '17 at 12:13

1

Access-Control-Allow-Origin appears due to different domains. may be you are running app on http://localhost or http://127.0.0.1

this domain is different than http://www.mocky.io/ hence it blocks the request.

to fix this you should check https://stackoverflow.com/a/38112602/1006780

also i notice that this is fixed a month ago https://github.com/julien-lafont/Mocky/issues/13#issuecomment-338432249

answered Nov 30 '17 at 12:13

Dhairya Vora

1,281
12
35

Hi and thanks for reply. I created a simply html file and javascript. I am not in localhost, I open the file simply with double click on it. So, I open the file in browser from c:/myTest/index.html – Gjord83 Nov 30 '17 at 13:18
Thats the problem, open it using a webserver like wamp or xampp or nodejs server or any other web server. – Dhairya Vora Nov 30 '17 at 16:52
@Gjord83 if that fixes your problem, kindly accept the answer. – Dhairya Vora Dec 01 '17 at 05:19

score 0 · Answer 2 · answered Nov 30 '17 at 12:15

You need to send javascript object to client side.

Example API result:

{
    "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
    }
}

Result in angular example:

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

Problems with GET call to rest API

2 Answers2

Linked