Разделение фронтенда и бэкенда **настроек** с использованием django rest framework и sveltekit

Я создаю приложение, используя django rest framework и sveltekit.

Что я должен сделать, чтобы фронтенд мог правильно получать backend api?

Более подробная информация:

• Я могу правильно использовать 'GET, POST' api с помощью PostMan.
• Я могу правильно использовать 'GET' api с помощью fetch.
• Я Не могу 'POST' api правильно используя fetch:

Вот моя попытка (подробности кода в последней части):

1. the very beginning:

frontend:

    fetch('http://127.0.0.1:8000/blogs/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name,
        about,
        cover,
      }),
    })

backend:

ALLOWED_HOSTS = []

В консоли браузера появляется эта ошибка:

Access to fetch at 'http://127.0.0.1:8000/blogs/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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:

[14/Jan/2022 17:11:46] "OPTIONS /courses/ HTTP/1.1" 200 0

2. Setting up cors:

frontend:

    fetch('http://127.0.0.1:8000/blogs/', {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name,
        about,
        cover,
      }),
    })

Я получаю эту ошибку в моем браузере:

POST http://127.0.0.1:8000/blogs/ net::ERR_ABORTED 415 (Unsupported Media Type)

3. change media Type:

frontend

    const data = new FormData();
    data.append('name', name);
    data.append('about', about);
    data.append('cover', cover);
    data.append('category', selected);

    fetch('http://127.0.0.1:8000/blogs/', {
      method: 'POST',
      mode: 'no-cors',
      body: data,
    })

Я получаю эту ошибку:

POST http://127.0.0.1:8000/blogs/ net::ERR_ABORTED 400 (Bad Request)

Кажется, я зашел в тупик, кто-нибудь может мне помочь?

О моем приложении:

Информация о сервере:

• django: http://127.0.0.1:8000
.
• svelte: http://127.0.0.1:3000
.

Вот некоторый код, который может быть полезен:

некоторый код бэкенда:

1. blog app:

# models.py
class Blog(models.Model):

    name = models.CharField(max_length=64, unique=True)
    about = models.CharField(max_length=255)
    cover = models.URLField(default='cover/default.jpg')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        db_table = 'blogs'

# serializers.py
class BlogSerializer(serializers.ModelSerializer):

    class Meta:
        model = Blog
        fields = '__all__'

# views.py
class CourseViewSet(viewsets.ModelViewSet):
    queryset = Course.objects.all()
    serializer_class = CourseSerializer


class BlogViewSet(viewsets.ModelViewSet):
    queryset = Blog.objects.all()
    serializer_class = BlogSerializer

router = routers.SimpleRouter()
router.register(r'blogs', BlogViewSet)

urls = router.urls

2. mysettings.py

DEBUG = True

ALLOWED_HOSTS = [
    'localhost',
    '127.0.0.1',
]

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'rest_framework',
    'django_filters',
    'blog.apps.BlogConfig',
]

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ['django_filters.rest_framework.DjangoFilterBackend'],
}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

frontend fetch

    fetch('http://127.0.0.1:8000/blogs/', {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        name,
        about,
        cover,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
      })
      .catch((err) => {
        console.log(err);
      });

Вернуться на верх