title: Angular 4 HTTP requests to Django Rest Framework
body: <p>I'm having issues finding the answer anywhere to an issue I'm having related to the (I think) Authorization header in an HTTP request I'm sending from Angular 4 to the Django Rest Framework API I've created. Lets get down to it:</p>
  
  <p><strong>EDIT:</strong>
  Confirmed that the problem relates to authorization since I am also using django-cors-headers now to rid myself of CORS issues for the 4200 port (since it is considered a different origin). The problem that remains is simply that I get the message "Unauthorized" when making requests towards the API. I'm starting to think it is an encoding issue since the following message is shown when I attempt the following request with httpie:</p>
  
  <pre><code>http GET http://localhost:8000/api/groups/ "Authorization: Basic admin:password"
  </code></pre>
  
  <p>And then the message is shown:</p>
  
  <pre><code>{
      "detail": "Invalid basic header. Credentials not correctly base64 encoded."
  }
  </code></pre>
  
  <p>In settings.py, I've made sure that both a permission class and authentication class have been made available.</p>
  
  <pre><code>REST_FRAMEWORK = {
  'DEFAULT_AUTHENTICATION_CLASSES': [
      'rest_framework.authentication.BasicAuthentication',
  ],
  'DEFAULT_PERMISSION_CLASSES': [
      'rest_framework.permissions.IsAdminUser'
  ],
  
  ...
  
  CORS_ORIGIN_WHITELIST = [
      'localhost:4200',
  ]
  </code></pre>
  
  <p>In views.py, this is perhaps where my fault is since the console error I get when trying to send the request from Angular -> Rest API is that 'No 'Access-Control-Allow-Origin' header is present on the requested resource.' which is untrue since it does NOT complain about this when I remove the authentication need.</p>
  
  <pre><code>class UserViewSet(viewsets.ModelViewSet):
      queryset = User.objects.all().order_by('-date_joined')
      serializer_class = UserSerializer
      permission_classes = (IsAdminUser, )
      authentication_classes = (BasicAuthentication, )
  
      def list(self, request):
          queryset = User.objects.all().order_by('-date_joined')
          serializer = UserSerializer(queryset, many=True, context={'request': request})
          return Response(serializer.data,
                          status=200)
  </code></pre>
  
  <p>The Angular dev server is running on localhost:4200 while django is left on its default of localhost:8000.</p>
  
  <p>I'll include the urls.py for good measure:</p>
  
  <pre><code>from django.conf.urls import url, include
  from rest_framework import routers
  from backend.api import views
  from django.contrib import admin
  
  router = routers.DefaultRouter()
  router.register(r'users', views.UserViewSet)
  router.register(r'groups', views.GroupViewSet)
  router.register(r'info', views.InfoViewSet)
  
  urlpatterns = [
      url(r'^api/', include(router.urls)),
      url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
      url(r'^admin/', admin.site.urls),
  ]
  </code></pre>
  
  <p>NOTE that I can make the request and get a response just fine with httpie using the authorization header like so:</p>
  
  <pre><code>http GET http://localhost:8000/api/users/ -a admin:password
  </code></pre>
  
  <p>Finally, here is the Angular code for making the request (I included everything so that imports can be checked as well):</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    title = 'app';
    results: string[];
  
    constructor(private http: HttpClient) {}
  
    ngOnInit(): void {
  
      this.http.get(
        'http://localhost:8000/api/users/',
        { headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
        ).subscribe(
          data =&gt; {
            this.results = data;
        },
          err =&gt; {
            console.log("ERROR RETREIVING USERS");
        });
    }
  }
  </code></pre>
  
  <p>I have also imported HttpClientModule and listed it under 'imports' in my app.module.</p>