Не удалось загрузить данные с удаленных json

Question

Я создаю гибридное приложение с угловыми и пытаюсь вызвать службу из внешнего источника. но когда я сделать вызов к URL я получаю сообщение об ошибке

XMLHttpRequest cannot load https:XXXX/xxx.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

вот мой код

app.controller('overview', function($scope, $http) { 
    $http({ 
     method : "GET", 
     url : "https://ysaf.XXXX.yourcxxxxx/resource.json" 
    }).then(function appSucces(response) { 
     $scope.resources = response.data; 
    }, function appError(response) { 
     $scope.resources = response.statusText; 
    }); 
}); 

, если я называю локальный файл .json я не получаю какие-либо ошибки, но только тогда, когда я называю внешний api, я получаю эту ошибку.

Есть ли что-нибудь, что я делаю неправильно в этом коде?

Answer 1

Access-Control-Allow-Origin настроен на ответ от сервера, это не запрос клиента, чтобы клиенты из разных источников имели доступ к ответу.

В этом случае https://ysaf.XXXX.yourcxxxxx/resource.json не позволяет вашему источнику получить доступ к ответу. Поэтому вы не можете его прочитать.

Answer 2

Добавьте необходимые заголовки, такие как Access-Control-Allow-Origin: *.

Вопрос, с которым вы столкнулись, является проблемой CORS. CORS - Cross Origin Resource Sharing.

CORS проблема возникает в следующих случаях

1) Если нас abc.com и доступ к xyz.com (другой домен)

2) Если мы находимся в http://localhost:8080/myapplication и доступа http://localhost:9080/anotherapplication (разные порты)

Answer 3

Вы должны загрузить это расширение для вашего развития:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Это решит все проблемы Access-Control-Allow-Origin :)

Не забудьте отключить его, когда вы остановите dev, это может быть проблемой для веб-навигации.