AngularJS HTTP Header

Question

I have a some problems. AngularJS application data from external url. This is my code. How to write authorization header. Response is HTTP status 401.

app.controller('AddressController', function($scope, $http){
$http.defaults.headers.common.Authorization = 'username password';
$http.get('http://URL/resources/cities?sortBy=cityId&sortOrder=asc&offset=0&limit=100').
    success(function(data, status, headers, config){
        $scope.posts = data;
    }).
    error(function(data, status, headers, config){

    });
});

Which external service are you using? I mean something like Apache. — AndreaM16, Dec 14 '15 at 19:00

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I've had a similar problem in past, more precisely, a CORS problem. You can read more about Cross-Origin Resource Sharing (CORS) on:

In few words, CORS happens when you haven't set the permission to access a specific file or data on a web service, in your case, on your Apache2 service. So, when you try to access them, it just tells you: "Response is HTTP status 401, Access Denied"

In order to solve this, in other words, allowing the access to your resource, you can make two things:

Fix your Apache2 .config file
Setting the permission on your AngularJS Controllers

I've always went for the first option, fixing my Apache2 .config file. You can find your Apache2.conf file in some of Apache2 folder. Just check in it's documentation.

Now I'm going to show you how I fixed the problem. In few words, I had some Jsons on my Apache2 server and I needed them to be fetched on my AngularJS Controllers in order to display some data in my Views.

I had something like:

myController.js

myApp.controller("myController", ["$scope","$http",function($scope, $http){

    var controller = this;

    $http.get('http://localhost/main.json').success(function(dataForViews){

        controller.data = dataForViews;

    })  
}]);

And in my Html Views I just requested the data with syntax like:

<p> {{myController.dataForViews.Name}} </p>

Now, In order to allow the access, I put this code on my Apache2.config:

<VirtualHost *:80>


    ServerAdmin yourName@yourName

    #Giving permissions
    Header set Access-Control-Allow-Origin "*"

    ############################ Main Page ###########################
    Alias /main.json /var/www/html/myApp/data/mainPages/mainJSON.json

    #When localhost/myApp, you get the application that runs on localhost:9000 
    #with its jsons
    <Location /myApp>
        ProxyPass  http://localhost:9000/
        ProxyPassReverse  http://localhost:9000/
    </Location>

    #Same thing for scripts, css, etc, like:
    <Location /scripts>
      ProxyPass  http://localhost:9000/scripts/
      ProxyPassReverse  http://localhost:9000/scripts/
    </Location>

</VirtualHost>

I was able to allow the access to my resources lying on my Apache2 server like this. Now, you may solve like I did or, if you get some errors, you may need to look at Apache2 Documentation

If you want so solve it in the AngularJS way, take a look at:

This Answer by @Quentin
This Answer by @CapK
And other related Q/A

I hope I've been helpful.

AngularJS HTTP Header

1 Answers1