Can't post data from Angular 8 to Django - django

Question

I'm trying to send data from Angular to Django and I keep getting the following error message in my browser:
HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8000/polls/token", ok: false, …}
error:
error: SyntaxError: Unexpected token N in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:32795:51) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6802:31) at Zone.runTask (http://localhost:4200/polyfills.js:6579:47) at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:6876:34) at invokeTask (http://localhost:4200/polyfills.js:8014:14) at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:8051:21)
message: "Unexpected token N in JSON at position 0"
stack: "SyntaxError: Unexpected token N in JSON at position 0↵ at JSON.parse (<anonymous>)↵ at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:32795:51)↵ at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:6802:31)↵ at Zone.runTask (http://localhost:4200/polyfills.js:6579:47)↵ at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:6876:34)↵ at invokeTask (http://localhost:4200/polyfills.js:8014:14)↵ at XMLHttpRequest.globalZoneAwareCallback (http://localhost:4200/polyfills.js:8051:21)"
__proto__: Error
text: "None"
__proto__: Object
headers: HttpHeaders
lazyInit: () => {…}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure during parsing for http://localhost:8000/polls/token"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8000/polls/token"
__proto__: HttpResponseBase
I also get this error from django:
AttributeError at /polls/token
'NoneType' object has no attribute 'set_cookie'
Here is my Angular frontend:
data.service.ts:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
const httpOptions = {
withCredentials: true,
};
#Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
public sendPostRequest(data){
return this.http.post("//localhost:8000/polls/token", data, httpOptions);
}
}
here's an excerpt of myapp.component.ts:
...
constructor(
private dataService: DataService
) {}
...
this.auth2.attachClickHandler(
element,
{},
(googleUser) => {
let token = googleUser.getAuthResponse().id_token;
this.dataService.sendPostRequest(token).subscribe((data: any[])=>{
console.log(data);
});
},
(error) => {
alert(JSON.stringify(error, undefined, 2));
}
);
...
console.log(token) returns a long string of letters&numbers
And here's my Django backend:
polls/views.py:
from django.conf import settings
from django.shortcuts import render
from django.http import HttpResponse, HttpRequest
from django.views.decorators.csrf import ensure_csrf_cookie
#ensure_csrf_cookie
def access_token(request: HttpRequest) -> HttpResponse:
if request.method == 'POST':
token = request.POST.get('body')
return HttpResponse(token)
polls/urls.py:
from django.conf import settings
from . import views
from django.urls import path
urlpatterns = [
path('token', views.access_token, name='access_token')
]
I'm new to django and angular and have been trying to figure this out for a few days now. I can't seem to find out what exactly is wrong.
Would really appreciate the help, Thank you!