Django Rest Framework Forbidden при отправке почтового запроса

Я делаю сайт с бэкендом на базе django rest framework и фронтендом на базе react, но когда я использую axios для отправки запроса post в /products, он отправляет ошибку 403 forbidden error

это файл представлений

@api_view(['GET', 'POST'])
def products(request):
    if request.method == 'GET':
        products = Product.objects.all()
        serializer = ProductSerializer(products, many=True)
        return Response(serializer.data)
        
elif request.method == 'POST':
    serializer = ProductSerializer(data=request.data)
    print(request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

вот как я отправляю запрос в react:

const handleSave = () => (
    axios.post('/products', getInputData()).then((response) => (console.log(response)))
);

вот мой файл настроек в django:

ALLOWED_HOSTS = []


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

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

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

<script>
let form = document.getElementById('form'); // selecting the form

form.addEventListener('submit', function(event) { // 1
    event.preventDefault()
    
    let data = new FormData(); // 2
    
    data.append("title", document.getElementById('title').value)  
    data.append("note", document.getElementById('note').value)
    data.append("csrfmiddlewaretoken", '{{csrf_token}}') // 3
    
    axios.post('create_note/', data) // 4
     .then(res => alert("Form Submitted")) // 5
     .catch(errors => console.log(errors)) // 6

})

</script>

Приведенный выше код:

1 - Добавляет слушателя события submit к форме.

2 - Создает новую форму в JavaScript.

3 - Добавляет токен CRSF. Если мы не включим его, то получим ответ 403 forbidden и не сможем отправить данные формы.

4 - Здесь мы используем метод axios.post для отправки данных формы.

5 - Если форма успешно отправлена, в вашем браузере появляется сообщение Form Submitted.

6 - Перехватывает и выводит ошибку в консоль, если при отправке формы произошла ошибка.

Теперь используйте этот код в соответствии с вашими данными и потребностями.

вот что я в итоге сделал

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function add_product(data) {
    const csrftoken = getCookie('csrftoken');

    const config = {
        headers: {
            'content-type': 'application/json',
            'X-CSRFToken': csrftoken,
        }
    }

    axios.post('/products', data, config).then((response) => (alert(response))

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