How to work with remote APIs through Angular?

Question

JavaScript

There is a service with an available API. There is a JS code using Angular:

(function(){
  'use strict';
  var app = angular.module('myApp', ['onsen.directives']).config(function($httpProvider){
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
  });
  app.controller('HttpController', function($scope, $http) {
      $scope.test = function() {
    $http({method: 'GET', url: 'https://www.eobot.com/api.aspx?email=XXXXX&password=YYYYY '}).
        success(function(data, status, headers, config) {
      console.log(data);
        }).
        error(function(data, status, headers, config) {
      console.log(data);
        });
      }
  })
})();

The execution problem is the following:

XMLHttpRequest cannot load https://www.eobot.com/api.aspx?email=XXXXXX&passwo... . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' localhost:8090 ' is therefore not allowed access.

I already found such a problem in Google, they advise deleting the header when configuring the module. It seems like I added the suggested line, the result is the same. What are the possible solutions?

Answer 1

It wants cross-origin resource sharing .
Solutions to the problem (in order of adequacy, if I may say so):
The apishka you are talking about was created for use in applications where there are no such things as cross-domain requests in principle. So no one really thought about support for browser JS. Phonegap apps are also not subject to cross-domain request restrictions.

Answer 2

Access-Control-Allow-Origin must be added on the api server (' https://www.eobot.com/ ').
In another way - jsonp toll or proxying requests through itself.