React Fullstack: not able to fetch item details from Rest API

Question

Im working on a fullstack django and react application, which for now just fetches the data from the django api, also im able to fetch the detail page of the first item present on the react list page but cannot do the same for the second item. It shows following error when i try to fetch the second item from django (strange but it works fine with the first item of id = 1 and not for id = 2 or 3).

Also, I pushed my whole code on bitbucket. You can debug both frontend and backend here https://bitbucket.org/Yash-Marmat/react-django-blog/src/master/

thanks in advance.

pplonski · Accepted Answer · 2020-12-08 11:32:02Z

1

Your urls looks strange. Try to change urls:

urlpatterns = [
    path('', ArticleListView.as_view()),
    path('detail/<int:pk>/', ArticleDetailView.as_view()),
]

and access with a changed URL in the frontend. I can recommend a good tutorial for Django+React CRUD.

answered Dec 8, 2020 at 11:32

pplonski

5,9772 gold badges40 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yash Marmat Over a year ago

thanks, but still the same error, also i too think that i need to use a different approach for this. Thanks for suggestion.

Kiran B · Accepted Answer · 2020-12-08 09:24:41Z

1

you need to use proxy key in inside frontend package.json file as shown bellow

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:8000",

and restart the react application.

answered Dec 8, 2020 at 9:24

Kiran B

826 bronze badges

3 Comments

Yash Marmat Over a year ago

thanks but it still showing the same error :(

Kiran B Over a year ago

try giving different port for API server.

Yash Marmat Over a year ago

i think the approach i used is not right or old (was following an old youtube tutorial, 3 years old) so now im using a complete different approach for my project. So, no longer working on it. But thanks again for the suggestions buddy. Also i cant accept the answer but i do upvote you 🙂️

Grape JUICE · Accepted Answer · 2022-12-13 13:49:19Z

1

You need to enable cors or cross origin resource sharing in your django api

You can do this by installing this package called django-cors-headers

Django cors headers github page

    pip install django-cors-headers

and then add it to your installed apps:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

You will also need to add a middleware class to listen in on responses:

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',  
    'django.middleware.common.CommonMiddleware',  
    ...
)

CORS_ORIGIN_ALLOW_ALL = True # If this is used then `CORS_ORIGIN_WHITELIST` will not have any effect
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = [
    'http://localhost:3030',
] # If this is used, then not need to use `CORS_ORIGIN_ALLOW_ALL = True`
CORS_ORIGIN_REGEX_WHITELIST = [
    'http://localhost:3030',
]

more details: https://github.com/ottoyiu/django-cors-headers/#configuration

reading the official documentation can resolve almost all problem

edited Dec 13, 2022 at 13:49

answered Dec 8, 2020 at 9:21

Grape JUICE

632 silver badges5 bronze badges

1 Comment

Yash Marmat Over a year ago

thanks but it still showing the same error :(

Collectives™ on Stack Overflow

React Fullstack: not able to fetch item details from Rest API

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related