Here’s a solution.
If you don’t allow cross domain at server side, it will raise an CORS error when you try to access to API. Even though both django and React run on localhost, they considered as different server because they run on different ports (8000, 3000 respectively).
[Solution for CORS error]
At Server Side
pip3 install django-cors-headers
For local development
Add below to your project section
settings.py. This allows all the requests.
CORS_ORIGIN_ALLOW_ALL = TrueCORS_ALLOW_CREDENTIALS = True
You cannot allow all the requests when you distribute your service. For more information about options, find this github.
CORS_ORIGIN_ALLOW_ALL = FalseCORS_ORIGIN_WHITELIST = [
[Solution for net::ERR_FAILED]
At Front Side
Make sure to put / in the end. If you done nothing with APPEND_SLASH option, django automatically append slash to url. If you try to reach api without slash at the end, it would not be able to get data from api.
Refresh the page and check development tool!