POST-запросы из JS-фронта в Django-бэкенд не работают с Ngrok

Я работаю над веб-сервисом на Python с использованием Django. Я использовал Ngrok для тестирования перед развертыванием. Моя проблема заключается в том, что POST-запрос, который я делаю на JavaScript в некоторых конечных точках, просто не получает никаких требуемых данных, вместо этого они просто возвращают None. В журналах Django и в браузере ответ 200 OK, но даже в журналах данные не отображаются (я печатаю все json-данные, прежде чем вернуть их).

Вот так я делаю POST-запросы в JS

const url = 'http://localhost:8000/register_equipment/';

const data = {
    "product": inputProduct.value,
    "description": inputDescription.value,
    "serial": inputSerial.value,
    "warehouse_location": inputWarehouseLocation.value,
    "shelf_location": inputShelfLocation.value,
    "additional_location": inputAdditionalLocation.value,
    "observations": inputObservations.value,
    "quantity": inputQuantity.value,
    "dedicated": dedicatedValues
};

// Request configuration
const options = {
    method: 'POST',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken') // Add CSRF token header
    },
    body: JSON.stringify(data)
};

// Perform the request using fetch
fetch(url, options)
    .then(response => {
        if (response.ok) {
            return response.json(); // Convert the response to JSON
        }
        throw new Error('Request failed');
    })
    .then(responseData => {
        console.log(responseData.groups); // Handle response data
    })
    .catch(error => {
        console.error('Error fetching group list:', error); // Handle errors
    });

Это функция, которую я использую для получения CSRF-токена

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();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

А это вид запроса

@csrf_exempt
def register_equipment(request):
    if not request.user.is_authenticated:
        return redirect('login')
    
    if request.method == 'POST':
        # Get JSON data from the frontend
        data = json.loads(request.body)
        print(data)
        print(data.get("dedicated"))

        # Process location data
        location = {
            "warehouse": data.get("warehouse_location"),
            "shelf": data.get("shelf_location"),
            "additional": data.get("additional_location"),
        }

        # Process incoming data and save the equipment
        try:
            new_equipment = Equipment(
                product=data.get("product"),
                description=data.get("description"),
                serial=data.get("serial"),
                location=location,
                observations=data.get("observations"),
                dedicated=data.get("dedicated"),
                quantity=data.get("quantity"),
                available=True
            )
            new_equipment.save()
            response_data = {'message': 'Equipment registered successfully'}
            return JsonResponse(response_data)

        except KeyError:
            return JsonResponse({'error': 'Missing required data'}, status=400)
    
    return JsonResponse({'error': 'Failed to register equipment'}, status=400)

Кроме того, при попытке доступа из другой сети ни один из запросов не работает, все они отправляют ошибку CONNECTION_REFUSED. Я не знаю, проблема ли это в том, как настроен мой бэк-энд, или я допустил ошибку при настройке Ngrok.

Я попытался следовать документации и установить промежуточное ПО CORS, но это тоже не помогло.

INSTALLED_APPS = [
    ...
    "corsheaders",  
    ...
]

MIDDLEWARE = [
    ...
    "corsheaders.middleware.CorsMiddleware",
    ...
]

Я не понимаю, что POST-запросы действительно работают (как в моей форме входа в систему), когда запросы выполняются кнопкой submit, а не JavaScript.

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="username">Nombre de usuario:</label>
        <input type="text" class="form-control" name="username" id="username" required>
    </div>
    <div class="form-group">
        <label for="password">Contraseña:</label>
        <input type="password" class="form-control" name="password" id="password" required>
    </div>
    <button type="submit" class="btn btn-primary btn-block">Iniciar sesión</button>
                            
</form>

Любая помощь, которую я могу получить, будет очень признательна.

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