Блог

Главная - Вопросы по программированию - Не удается получить доступ к «экземпляру» или подробному представлению объекта из интерфейса react с помощью серверной части платформы Django rest

Не удается получить доступ к «экземпляру» или подробному представлению объекта из интерфейса react с помощью серверной части платформы Django rest

#reactjs #django #django-rest-framework #django-cors-headers

Вопрос:

Итак, у меня есть этот вид для моих моделей в django-rest-framework проекте

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

Это мой сериализатор:

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

По URL-адресам:

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

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

Теперь у меня есть интерфейсное приложение на основе react, для доступа к этому объекту, если я получу доступ к набору записей, то есть к списку всех объектов, то я вполне могу это сделать, но, например, если я хочу получить доступ только к одному из объектов в базе данных, что-то вроде:

 path/to/url:8000/object/id

Затем я получил эту ошибку, но только из интерфейса, приложения react:

 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.

На самом деле, я django-cors-headers установил, а также настроил на своем settings.py файл. Как я уже сказал, я могу получить доступ к списку объектов, перечисляя все объекты в БД, но не детали.

На моем settings.py У меня есть:

 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',
]

Очевидно, что это небезопасно, я просто использую его для своего местного «эксперимента».

Также добавил его в INSTALLED_APPS ie (corsheaders) и далее MIDDLEWARE_CLASSES , например: 'corsheaders.middleware.CorsMiddleware',

У меня даже есть это в настройках: ALLOWED_HOSTS = ['*']

Стоит отметить, что у меня нет для этого конкретного APIView, хотя я могу получить доступ к нему из бэкенда, то есть с помощью встроенного пользовательского интерфейса drf.

Это происходит только из экземпляра react.

Ответ №1:

Попробуйте CORS_ALLOW_ALL_ORIGINS вместо CORS_ORIGIN_ALLOW_ALL

Комментарии:

1. Спасибо, то же самое, я вижу эту ошибку на консоли chrome

Ответ №2:

Вам нужно добавить значения, найденные в вашем классе, в список заголовков.Например;

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

Метки: