使用AngularJS跨域请求块获取

Question

It's been a week that I'm stuck on this problem; I connect to my server API and retrieve a cookie.

I then do a GET to retrieve the JSON returning well Cookie session but I have a problem with Cross Origin.

It is ok on the side of the API because I get a good status 200.

The response :

=============================================================

RESPONSE : Access-Control-Allow-Cred... true Access-Control-Allow-Head... Accept,Origin,Content-Type,X-Requested-With Access-Control-Allow-Meth... GET, POST, PUT, DELETE Access-Control-Allow-Orig... * Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Connection Keep-Alive Content-Type application/json Date Wed, 06 Aug 2014 18:50:20 GMT Expires Thu, 19 Nov 1981 08:52:00 GMT Keep-Alive timeout=15, max=100 Pragma no-cache Server Apache Transfer-Encoding chunked X-Powered-By PHP/5.3.3

THE REQUEST: Accept application/json, text/plain, / Accept-Encoding gzip, deflate Accept-Language fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3 Cookie token=97e437a8db5bf96d01e980a3dd81c30cb4bcbf19; PHPSESSID=kjpqve8tbebhh8u2p6nlu2jki5 Host myapi.com Origin localhost Referer localhost User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0

Here my request :

function loadFeed() {
        $scope.show
      /*  console.log($scope.userid);*/


        $http.get('http://myapi.com/', {withCredentials: true})
            .success(function (data) {

                        $scope.hide();
                        $scope.items = data.data;
                       /* console.log($scope.data); */

                    })
            .error(function(result) {
                        alert("feed ne marche pas");

                    });

    }

I try this in myapp config :

.config(['$httpProvider', function($httpProvider) {
     $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

 }])   

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', 'http://myapi.com/**', 'http://www.myapi.com/**']);

 }])

I do not understand where is the problem ?

Answer 1

Finaly, i change my header on my api : Before : header('Access-Control-Allow-Origin: *'); Now : header('Access-Control-Allow-Origin: 192.168.1.87:8100');

it works but I don't think it will work when I will compile my mobile application...