Проблема в динамическом связывании данных с html с использованием jquery

Question

Мы пытаемся динамически привязать данные из API в html, используя jquery. У нас есть API, который дает данные в формате json, как этот

Наш html файл имеет следующий код

        $(document).ready(function () {
            alert('start');
            $.ajax({
                type: "GET",
                url: 'https://localhost:44361/api/pdfcreator/GetEmployees',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $('#student').append("<tr><td>" + item.Name + "</td>" + "<td>" + item.LastName + "</td>" + "<td>" + item.Age + "</td>" + "<td>" + item.Gender + "</td></tr>");
                    });
                },
                failure: function (data) {
                    alert(data.responseText);
                },
                error: function (x, e) {
                    alert(x.responseText);
                }
            });
        });

и также

       <table id="student" cellpadding="2" cellspacing="2" border="1" width="400px">
            <tr>
                <td style="background-color: gray; color: white">Name</td>
                <td style="background-color: gray; color: white">LastName</td>
                <td style="background-color: gray; color: white">Age</td>
                <td style="background-color: gray; color:white">Gender</td>
            </tr>
        </table>

Но когда в браузере просматривается html, это выглядит так:

Как видите, данные из API здесь не показаны. В браузере также отображается следующее сообщение об ошибке

Может кто-нибудь сказать, что именно нам здесь не хватает?

Спасибо