Cannot access "instance" or detail view of an object from react frontend with Django rest framework backend

Question

So, I have this view for my models, on a django-rest-framework project

class GenreViewSet(viewsets.ModelViewSet):
    queryset = Genre.objects.all()
    serializer_class = GenreSerializer
    permission_classes = [permissions.AllowAny]

This is my serializer:

class GenreSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Genre
        fields = ('name', 'artist', 'albums')
        depth = 2

On urls:

router = routers.DefaultRouter()
router.register(r'genre', views.GenreViewSet)

urlpatterns = [
    path('rest-framework/', include(router.urls)),
]

Now, I have a react based frontend app, to access this object, if I access the recordset, meaning, the list of all the objects, then I'm perfectly able to do it, but, if for example, I want to access, just one of the objects in database, something like:

path/to/url:8000/object/id

Then I got this error, but only from the frontend, the react app:

Access to fetch at 'http://127.0.0.1:8000/rest-framework/genre/2' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested 
resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the 
resource with CORS disabled.

Actually, I do have django-cors-headers installed, and also configured on my settings.py file. As I said, I can access the object list, listing all the objects into db, just not the detail.

On my settings.py I have:

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_HEADERS = ("x-requested-with", "content-type", "accept", "origin", "authorization", "x-csrftoken")

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CSRF_TRUSTED_ORIGINS = [
    'localhost:3000',
    '127.0.0.1:3000',
]

Obviously, this is insecure, I just using it for my local "experiment"

Also added it to INSTALLED_APPS ie (corsheaders), and on MIDDLEWARE_CLASSES, like: 'corsheaders.middleware.CorsMiddleware',

I even have this on settings: ALLOWED_HOSTS = ['*']

It is worth mentioning, that I don't have a particular APIview for that, although I can access it from the backend, meaning, using the drf built-in user interface.

This only happens from the react instance.

oluwakayode · Accepted Answer · 2021-05-03 18:59:47Z

1

Try CORS_ALLOW_ALL_ORIGINS instead of CORS_ORIGIN_ALLOW_ALL

answered May 3, 2021 at 18:59

oluwakayode

1923 silver badges11 bronze badges

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

1 Comment

NeoVe Over a year ago

Thank You, same thing, I'm able to see that error on chrome's console

brkslmn · Accepted Answer · 2021-05-16 21:09:43Z

1

You need add the values found in your class to the headers list.For example;

CORS_ALLOW_HEADERS = ("x-requested-with", "content-type", "accept", "origin", "authorization", "x-csrftoken", "name", "artist", "albums")

answered May 16, 2021 at 21:09

brkslmn

111 bronze badge

Collectives™ on Stack Overflow

Cannot access "instance" or detail view of an object from react frontend with Django rest framework backend

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related