Angular 4 HTTP requests to Django Rest Framework - django

Question

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:
EDIT:
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:
http GET http://localhost:8000/api/groups/ "Authorization: Basic admin:password"
And then the message is shown:
{
"detail": "Invalid basic header. Credentials not correctly base64 encoded."
}
In settings.py, I've made sure that both a permission class and authentication class have been made available.
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': [
'rest_framework.authentication.BasicAuthentication',
],
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.IsAdminUser'
],
...
CORS_ORIGIN_WHITELIST = [
'localhost:4200',
]
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.
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)
The Angular dev server is running on localhost:4200 while django is left on its default of localhost:8000.
I'll include the urls.py for good measure:
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),
]
NOTE that I can make the request and get a response just fine with httpie using the authorization header like so:
http GET http://localhost:8000/api/users/ -a admin:password
Finally, here is the Angular code for making the request (I included everything so that imports can be checked as well):
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 => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
}
}
I have also imported HttpClientModule and listed it under 'imports' in my app.module.

Answer 1

Separate ports are considered different origins, so you will of course, get a Cross-Origin error (CORS) on localhost. This is a browser security feature alongwith your server.
Instal django-cross-header package for resolving cross-domain error.

Answer 2

I use the same Backend Framework , and the solution I've found was to build my project with the right host using
ng build --production -host=myDomain.com // try localhost -p 8080 in your case
and replace
Access-Control-Allow-Origin: 'http://localhost:4200'
with
Access-Control-Allow-Origin: '*'

Answer 3

The problem was solved in two ways. Firstly, I did not correctly ensure that CORS would be enabled from the origin of where Angular 4 was sending the request. #kmcodes solution of using django-cors-headers was a good one and I no longer had an issue with 'Access-Control-Allow-Origin' being missing after adding it to my project.
The second part of the problem was in the header I was putting on to the request sent by Angular 4. The following was the change I needed to make:
this.http.get(
'http://localhost:8000/api/users/',
{ headers: new HttpHeaders().set('Authorization', 'Basic admin:password'), }
).subscribe(
data => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
To this:
this.http.get(
'http://localhost:8000/api/users/',
{ headers: new HttpHeaders().set('Authorization', 'Basic ' + btoa('admin:password')), }
).subscribe(
data => {
this.results = data;
},
err => {
console.log("ERROR RETREIVING USERS");
});
I got the hint when using httpie to inspect my request and saw that when I didn't use the -a flag to add authentication parameters but rather the 'Authorization' header. This gave me an error stating that the request failed with error code 401, unauthorized, since the username:password part was not encoded with base64. In Angular 4 (and maybe before) btoa() solves this as above.