запрос AJAX не проходит в Axios

Question

Так что я использую axios, чтобы иметь доступ к Cloudinary API и загружать фотографии.Затем я хочу выполнить запрос AJAX, который связывается с моим собственным API, чтобы сохранить URL для только что загруженной фотографии.Вот мой код:

$("#file-upload").change(function (event) {
        file = event.target.files[0];

$("#add-article").click(function () {
        formData.append('file', file);
        formData.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);

        axios({
            url: CLOUDINARY_URL,
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: formData
        }).then(function (res) {
            console.log(res);
            fileSource = res.data.secure_url;

            $.ajax({
                url: 'https://127.0.0.1:5000/api/admin/add_news',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({
                    'title': newsTitle,
                    'imgSrc': fileSource
                }),
                method: 'POST',
                dataType: 'json',
                crossDomain: true,
                success: function (res) {
                    alert(res.message);
                    location.reload();
                },
                error: function () {
                    console.log('error')
                },
                complete: function (jqXHR) {
                    if (jqXHR.status == '401') {
                        console.log(jqXHR.status)
                    }
                }
            });
        }).catch(function (err) {
            console.log(err);
        });

    }); 

Я поместил все это в функцию document.ready.Он возвращает ошибку, подобную этой:

Я читал о совместимости jQuery и JavaScript, так что мне здесь не хватает?