DEV Community

Cover image for Build a CRUD application using Django and React

Build a CRUD application using Django and React

Mangabo Kolawole on February 13, 2021

As a developer, CRUD operations are one of the most basic concepts to know. Today, I'll show you how to build a REST API using Django and Django Re...
Collapse
 
mastacheata profile image
Mastacheata

As someone with a security research background it really hurts to see you noticed the cors problem, but still used the bad solution anyways.
My suggestion for the future: implement a secure version in your tutorials and point people at the documentation for how to change it.
Bonus points: You might get more interaction with your tutorials when people who modify it get stuck at the security and ask you for what they might have done wrong ๐Ÿ˜‰

Other than that this is a really great tutorial for getting started with react and drf.
I've learned both on the job and only in an already existing project. I would've been glad for such an entry level tutorial 2 years ago.

Collapse
 
koladev profile image
Mangabo Kolawole

Thanks for your comment.
And I knew it would embarrass some readers to see that Iโ€™ve consciously neglect this CORS problem. Actually I love your suggestion and I think that Iโ€™ll modify the article to fit it, because it will help beginners to learn too.
Thanks a lot. ๐Ÿ˜‰

Collapse
 
adir1661 profile image
adir abargil

It might be a good idea to update the react router to its new version :)

Collapse
 
koladev profile image
Mangabo Kolawole

Great idea! Ty

Collapse
 
mrtwister96 profile image
Schalk Olivier

Great tutorial thanks, I just get one small issue and I am not sure why.

when I include the headers on the axios requests:

...axios
.get(${baseURL}/menu/, {
headers: {
headers,
},
})....

I get the below error:

Access to XMLHttpRequest at 'localhost:8000/api/menu/4/' from origin 'localhost:3000' has been blocked by CORS policy: Request header field headers is not allowed by Access-Control-Allow-Headers in preflight response.

As soon as I remove the headers from the axios requests:

...axios
.get(${baseURL}/menu/)
.then(...

all is working 100%, what am I doing wrong lol ?

Collapse
 
koladev profile image
Mangabo Kolawole

A little bit strange. Have you install the CORS package on the Django server side?

Collapse
 
danielphilip12 profile image
danielphilip12 • Edited

I got the same issue. When I changed the headers to not use the variable (and just put the "Content-type": "application/json" in directly), it worked.

This solution did not work for the add menu function with the post request. There, I had to remove the header completely to get it to work.

Collapse
 
adii9 profile image
Aditya Mathur

This is a great post!!
You can serialize all the fields without mentioning all of them in your serializer class like :

class MenuSerializer(serializers.ModelSerializer):
    class Meta:
        model = Menu
        fields = '__all__'  
Enter fullscreen mode Exit fullscreen mode
Collapse
 
furtleo profile image
Leonardo Furtado

Still stuck with cors problem

Collapse
 
koladev profile image
Mangabo Kolawole

Can you show me your CORS configuration on settings.py?

Also, on which address the react server is running?

Collapse
 
lorenepecci profile image
Lorene Pecci

Hi, I'm starting to code and I want to know why do you use django instead of node.js? Thanks.