Problems integrating Django and Tableau with Web Data Connector (WDC)

I’m working on a project where I need to integrate data from my Django application into Tableau using a Web Data Connector (WDC). However, I’m running into several issues and would appreciate any help or guidance from the community.

Setup:

Backend: Django (Python) Goal: Tableau Dashboard Connection: Web Data Connector (WDC) What I’ve done so far:

I created a WDC that fetches data from my Django API. The API provides JSON data, which I want to pass to Tableau via the WDC. The WDC was built using JavaScript and connects to the Django API. Issues:

CORS Errors: Tableau seems to have issues with the Cross-Origin Resource Sharing (CORS) settings in my Django application. I’ve installed and configured django-cors-headers, but the error persists. Slow Data Transfer: When dealing with large datasets, the transfer from Django to Tableau is extremely slow. Authentication: My Django API uses token-based authentication, but I’m unsure how to implement this securely in the WDC. My Questions:

How can I resolve CORS issues between Django and Tableau? Are there best practices to speed up data transfer between Django and Tableau? How can I securely implement authentication (e.g., token-based or OAuth) in the WDC for Django? Additional Information:

Django version: your version Tableau version: your version WDC Documentation: I’ve reviewed the OFFICIAL WDC DOCUMENTATION , but it doesn’t fully address my issues. I’d be grateful for any advice or tips!

Of course, here is my code:

The problem is that the communication between WDC and the Django API is not working. It shows that data is being sent, but the API is not receiving it.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau Web Connector</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Tableau Web Connector</h1>
    
    <div id="loginSection">
        <h2>Benutzeranmeldung</h2>
        <form id="loginForm">
            <label for="username">Benutzername:</label>
            <input type="text" id="username" name="username" required>
            <br>
            <label for="password">Passwort:</label>
            <input type="password" id="password" name="password" required>
            <br>
            <button type="submit">Einloggen</button>
        </form>
    </div>

    <div id="dataSection" style="display:none;">
        <h2>Daten senden</h2>
        <button id="sendData">Daten senden</button>
    </div>

    <script>
        $(document).ready(function() {
            // Anmeldeformular verarbeiten
            $('#loginForm').submit(function(event) {
    event.preventDefault(); // Verhindert das Standard-Formularverhalten

    const username = $('#username').val();
    const password = $('#password').val();

    // Ajax-Anfrage für die Anmeldung
    $.ajax({
        url: 'https://my_domain/api/login/', // URL für die API-Login-API
        type: 'POST',
        contentType: 'application/x-www-form-urlencoded', // Formulardaten senden
        data: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, // Daten als String senden
        success: function(response) {
            console.log("Anmeldung erfolgreich:", response);
            $('#loginSection').hide();
            $('#dataSection').show(); 
        },
        error: function(xhr, status, error) {
            console.error("Fehler bei der Anmeldung:", xhr.responseText);
            alert("Anmeldung fehlgeschlagen. Bitte überprüfe deine Anmeldedaten.");
        }
    });
});

            // Funktion zum Senden der Daten
            $('#sendData').click(function() {
                const testData = {
                    name: "Test",
                    value: 42.0
                };

                $.ajax({
                    url: 'https://my_domainy/api/testdata/', // URL für die Testdaten-API
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(testData),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true; // Erlaube das Senden von Cookies
                    },
                    success: function(response) {
                        console.log("Daten erfolgreich gesendet:", response);
                    },
                    error: function(xhr, status, error) {
                        console.error("Fehler beim Senden der Daten:", error);
                        alert("Daten konnten nicht gesendet werden.");
                    }
                });
            });
        });
    </script>
</body>
</html>









Here is my django api: 

If I try to log into this API via Shell, it works as expected. However, the data is not being sent from WDC to the Django API.



class TestDataViewSet(viewsets.ModelViewSet):
    queryset = TestData.objects.all()
    serializer_class = TestDataSerializer
    permission_classes = [IsAuthenticated]


def web_connector(request):
    return render(request, 'tableau_web_connector.html')

@api_view(['POST'])
def api_login_view(request):
    username = request.data.get('username')
    password = request.data.get('password')

    logger.debug("Versuche, Benutzer %s anzumelden.", username)  # Protokolliere den Anmeldeversuch

    user = authenticate(request, username=username, password=password)

    if user is not None:
        login(request, user)
        logger.info("Login erfolgreich für Benutzer: %s", username)
        return JsonResponse({"message": "Login erfolgreich!"}, status=status.HTTP_200_OK)
    else:
        logger.warning("Login fehlgeschlagen für Benutzer: %s", username)
        return JsonResponse({"error": "Ungültige Anmeldedaten!"}, status=status.HTTP_400_BAD_REQUEST)
Вернуться на верх