i am using django + angular 2
i am using rest_framework_jwt with a url like this
url(r'^api/api-token-auth/', obtain_jwt_token),
url(r'^api/settings/?$', views.SettingsValues.as_view()),
My view is
class SettingsValues(generics.ListAPIView):
serializer_class = SettingsSerializer
permission_classes = (permissions.IsAuthenticatedOrReadOnly,)
def get_queryset(self):
queryset = Settings.objects.all()
queryset = queryset.filter(user=self.request.user.id)
print self.request.user
return queryset
My service is:
getSettings() : Promise <SettingsValues> {
return this.http.get('/api/settings', { headers: this.headers })
.toPromise()
.then(response => response.json() as SettingsValues);
}
My login is working fine, but i cannot return the settings from django..
The print inside def get_queryset shows AnonymousUser.
Any idea what i am doing wrong ?
EDIT
private headers = new Headers({
'Content-Type': 'application/json',
'Accept': 'application/json',
});
After obtaining the token from server, you have to save it and send in the header of subsequent api calls. Something like this:
getSettings() : Promise <SettingsValues> {
this.headers.append('Authorization', 'JWT ' + token);
return this.http.get('/api/settings', { headers: this.headers })
.toPromise()
.then(response => response.json() as SettingsValues);
}
In Angular 1.x.x, i can add this to cache Authorization Header for all subsequent api calls.
$http.defaults.headers.common.Authorization = 'JWT ' + token`;
In Angular 2, I am not sure how to cache it for all but take a look at this answer
Related
I am working on a project using django 3.1 for backend and vue 3 for frontend.
I am pretty new to Django so I am still learning the ropes and I do not know if what I am trying is totally wrong.
I created a model that holds a user email and and an image field as follows:
class UsedBike(models.Model):
sellerEmail = models.CharField(max_length=255)
image = models.ImageField(upload_to='uploads/', blank=True, null=True)
class Meta:
ordering = ('sellerEmail', )
def __str__(self):
return self.sellerEmail
def get_image(self):
if self.image:
return 'http://127.0.0.1:8000' + self.image.url
return ''
I created a serializer for my model as follows:
class UsedBikeSerializer(serializers.ModelSerializer):
class Meta:
model = UsedBike
fields = (
"id",
"sellerEmail",
"get_image",
)
and in the views file, I created a function for saving the data in the database:
#api_view(['POST'])
def sellBike(request):
serializer = UsedBikeSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
I also registered the url in the urls file.
As for vue part, I used axios to send my post request as follows:
submitData() {
const formData = {
sellerEmail: this.sellerEmail,
image: this.productImage
}
axios
.post("/api/v1/sell-bike/", formData)
.then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
},
where in the template I am getting the inputs like this:
<input type="text" v-model="sellerEmail">
<input type="file" accept="image/png, image/jpeg" id="imageInput" v-on:change="onFileChange()">
<button #click="submitData">Upload</button>
and the method onFileChange is:
onFileChange(e) {
let imageInput = document.getElementById("imageInput")
this.productImage = imageInput.files[0]
},
When I send the request, I get "POST /api/v1/sell-bike/ HTTP/1.1" 200 55 in the django terminal. However, If I print request.data I get the following:
{'sellerEmail': 'test#email.com', 'image': {}}
As you can see, image is empty and when I checked the database, the email part is filled correctly but image is empty.
How can I solve this problem?
Any help is appreciated.
IN your axios call, you need to include the below header as well:
submitData() {
const formData = new FormData();
formData.append('sellerEmail', this.sellerEmail);
formData.append('image', this.productImage);
const headers = {headers: { 'Content-Type': 'multipart/form-data' }}
axios
.post("/api/v1/sell-bike/", formData, headers)
.then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
}
Also, to save image to database, you also need to include the "image" in fields inside UsedBikeSerializer
I created a login API using Django rest framework and then used session auth.
When i sent request via Postman , i get csrftoken and sessionid cookies.
and i was able to access content on backend.
OK fine.
But when i built small login form html and called that API for logging in. It worked.
I see COOKIES IN RESPONSE BUT COOKIES ARE NOT SET IN CHROME BROWSER.
Under Storage section in dev tools cookies are empty.
when i tried to access content(other views/apis) , i was not able to..
I think its because of Cookies are not being stored in browser..
Been on this like 5 days. Please can Someone explain about cookies not being saved.?
View.py
class Login(APIView):
authentication_classes = [SessionAuthentication,]
def post(self, request, format=None):
username = request.POST.get("username", "")
print(request.session)
password = request.POST.get("password", "")
user = authenticate(request,username=username,password=password)
if user is not None:
login(request,user)
print(user)
return Response('Yes')
else :
return Response('No')
class List(APIView):
authentication_classes = [SessionAuthentication,]
permission_classes = [IsAuthenticated,]
def get(self, request, format=None):
return Response("Ark")
My Axios Request for login :
let s = this;
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Authorization", "Basic cjox");
myHeaders.append("Access-Control-Allow-Credentials","*");
var urlencoded = new URLSearchParams();
var requestOptions = {
method: 'POST',
credentials: 'same-origin',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
axios.post("http://127.0.0.1:8000/api/login/",urlencoded,{headers:myHeaders},{withCredentials: true})
.then(res=>{
console.log(res.headers);
})
My other request :
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
myHeaders.append("Access-Control-Allow-Credentials","*");
var urlencoded = new URLSearchParams();
var requestOptions = {
method: 'GET',
credentials: 'same-origin',
headers: myHeaders,
redirect: 'follow'
};
axios.get("http://127.0.0.1:8000/api/d/",{headers:myHeaders},{withCredentials: true});
How to access GET request data in django rest framework. In the docs, they have mentioned "For clarity inside your code, we recommend using request.query_params instead of the Django's standard request.GET"
https://www.django-rest-framework.org/api-guide/requests/
But when I use request.query_params.get('some_vaue') it gives me none even though I pass the data in the request body.
sample code example:
class TestView(APIView):
def get(self, request):
test = request.query_params.get('test')
print('data',test)
...
...
...
When I pass some value in the body of the request in postman and print the value, it actually prints None.
Update
Below is my axios code
axios.get(API_URL, {
headers: {
'Content-Type': 'application/json'
},
params: {
page_num: 1,
test: 'test data'
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err.response.data);
});
Re-Update:
For testing purpose I printed out the request object like
print(request.__dict__)
so it printed out
{'_request': <WSGIRequest: GET '/api/my api url/?page_num=1&test=test+data'>, 'parsers': [<rest_framework.parsers.JSONParser object at 0x0000016742098128>, <rest_framework.parsers.FormParser object at 0x00000167420980B8>, <rest_framework.parsers.MultiPartParser object at 0x00000167420980F0>], 'authenticators': (), 'negotiator': <rest_framework.negotiation.DefaultContentNegotiation object at 0x0000016742098080>, 'parser_context': {'view': <app_name.views.APIClassName object at 0x0000016742280400>, 'args': (), 'kwargs': {}, 'request': <rest_framework.request.Request object at 0x0000016742107080>, 'encoding': 'utf-8'}, '_data': {}, '_files': <MultiValueDict: {}>, '_full_data': {}, '_content_type': <class 'rest_framework.request.Empty'>, '_stream': None, 'accepted_renderer': <rest_framework.renderers.JSONRenderer object at 0x00000167421070B8>, 'accepted_media_type': 'application/json', 'version': None, 'versioning_scheme': None, '_authenticator': None, '_user': <django.contrib.auth.models.AnonymousUser object at 0x0000016741FFAC88>, '_auth': None}
I could see that it is passing the data but not sure why if i do request.data['page_num'] or any other value it doesn't get the data.
If you are using class based views :
POST provides data in request.data and GET in request.query_params
If you are using function based views:
request.data will do the work for both methods.
axios does not support sending params as body with get method , it will append params in url. so if you are using axios you will have to use query_params
Axios example code:
axios.get(API_URL, {
params: {
testData: 'test data',
pageNum: 1
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err.response.data);
});
DRF example code:
Class TestView(APIView):
def get(self, request):
test_data_var = request.query_params['testData']
page_num_var = request.query_params['pageNum']
Note:
If you're testing it in postman then put the get request query params in Params tab.
For me the accepted answer did not work.
A much simplier solution I saw no one mention is the following :
Append them to the URL like this : yourApi.com/subdomain/?parameter1=something
Axios.js
const target = "someApiYouWantToFetch.com"
let parameter = "DataYouWantToSend"
axios.get(`${target}?parameter=${parameter }`)
views.py
def get(self,request,*args,**kwargs): #or def list()
data = request.GET.get('name')
In DRF if you want to access request.GET you should use request.request.GET
for example
#action(methods=['GET',], detail=False)
def activation(request, *args, **kwargs):
uid = request.request.GET.get('uid')
token = request.request.GET.get('token')
I'have rest api devlopped with djago and application front devlopped with agular7 and i try to upload image to my rest api when i try to send it with form data the form data is empty in the api.
for angular i try to send form data with file.
Angular:
getPredictionImage(file): Observable<any> {
const HttpUploadOptions = {
headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data'})
}
const f = new FormData();
f.append('image', file, file.name);
console.log(f);
return this.http.post(this.urlapiimage, file, HttpUploadOptions);
}
Django:
def post(self, request, format=None):
print("heloooo")
print(request.data)
serializer = MammographySerializer(data=request.data)
print(serializer)
if serializer.is_valid():
result='hi'
serializer.save()
return Response(result,status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
the request.data is empty
it worked for me may be this help u to find your solution
Angular :
upload(file): Observable<any> {
let csrftoken = getCookie('csrftoken');
let headers = new HttpHeaders({
'Access-Control-Allow-Origin': '*',
'X-CSRFToken': csrftoken,
});
const formdata = new FormData();
formdata.append("image", file); //i did not use 3rd argument file.name
let options = {
headers: headers, withCredentials :true }
return this.http.post(this.urlapiimage , formdata, options )
}
Django:
def post(self, request, format=None):
if 'file' not in request.data:
raise ParseError("Empty content ")
photo = request.data["file"]
serializer = MammographySerializer(photo = photo) // use this instead data =request.data
if serializer.is_valid():
result='hi'
serializer.save()
return Response(result,status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
after trying this , than also u r getting error , read about DRF parser ( https://www.django-rest-framework.org/api-guide/parsers/)
"important point if u r using chrome and if r using http://127.0.0.1:8000/ for django server and localhost:4200/ for angular than because of CORS(different ports) chrome does not allow . use this 127.0.0.1:4200/ for angular server instead of localhost:4200/ and if u don't want to do this use firefox instead of chrome it allows CORS
Yes, there is a similar question without resolution to the actual question.
My users may be trying out the app and then decide to register for an account to save. Once registered I need to log them in without redirecting or reloading the page. I've got the registration working and logging them in is no problem, but what do I return to the client in order for the logged in session to be active in the browser? I'm not looking to add any other frameworks or libraries to the stack, please.
Django View (some omitted)
class CheckAuthTokenAjaxView(FormView):
form_class = AuthTokenForm
def post(self, *args, **kwargs):
form = self.form_class(self.request.POST)
u = get_user_model().objects.filter(email=email).first()
u.email_confirmed = True
u.save()
login(self.request, u)
# What should I be sending back?
return JsonResponse({"success": True}, status=200)
JS
Doc.Register.checkAuthTokenForm = function(event) {
event.preventDefault();
var form = document.getElementById('authtoken-form');
var data = new FormData(form);
d3.json('/users/ajax/checkAuthToken/', {
method: 'post',
body: data,
headers: {
// "Content-type": "charset=UTF-8",
"X-CSRFToken": Doc.CSRF,
}
})
.then(result => {
if (result.hasOwnProperty('errors')) {
// ...
} else {
// WHAT DO I DO HERE?
}
});
}