无法从反应前端与 Django 休息框架后端访问对象的“实例”或详细视图

Posted 2023-03-03

技术标签:

【中文标题】无法从反应前端与 Django 休息框架后端访问对象的“实例”或详细视图【英文标题】：Cannot access "instance" or detail view of an object from react frontend with Django rest framework backend 【发布时间】：2021-07-26 04:24:41 【问题描述】：

所以，我在 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

在网址上：

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

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

现在，我有一个基于反应的前端应用程序来访问这个对象，如果我访问记录集，意思是所有对象的列表，那么我完全能够做到，但是，例如，我想要访问，只是数据库中的一个对象，比如：

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 即（corsheaders）和MIDDLEWARE_CLASSES，例如：'corsheaders.middleware.CorsMiddleware',

我什至有这个设置：ALLOWED_HOSTS = ['*']

值得一提的是，虽然我可以从后端访问它，也就是说，使用 drf 内置用户界面，但我没有为此提供特定的 APIview。

这只发生在 react 实例中。

【问题讨论】：

【参考方案1】：

尝试 CORS_ALLOW_ALL_ORIGINS 而不是 CORS_ORIGIN_ALLOW_ALL

【讨论】：

谢谢，同样的事情，我可以在 chrome 的控制台上看到该错误【参考方案2】：

您需要将在您的类中找到的值添加到标题列表中。例如；

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