XMLHttpRequest во vue.js

Question

У меня уже едет крыша, то ли я совсем перестал соображать к концу дня, то ли vue просто издевается надо мной. Я пытаюсь отправить обычный get запрос на сервер, но ничего не работает! Есть такой кусок кода в одном из компонентов vue:

methods: Object.assign({
    signIn() {
        var data = JSON.stringify({
            username: this.username,
            password: this.password
        })
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://127.0.0.1:8000/api/v1/auth_token/token/login', false);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(data)
        if (xhr.status == 200) {
            localStorage.token = JSON.parse(xhr.responseText).auth_token
            this.auth = true
        }
    },
    del() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/api/v1/articles/list', false);
        xhr.send()
    }
}, mapActions(['fetchArticles']))

Когда я вызываю первую функцию всё работает отлично, приходит ответ 200 и нет никаких ошибок, когда я вызываю вторую функцию я получаю это: Что я делаю не так? Меня переполняют эмоции. Причём мой backend точно отправляет CORS, потому что когда я обращаюсь по тому же адресу но с помощью fetch то всё работает и js не ругается ни на какие CORS и так же первая функция не ругается ни на какие CORS. Я не знаю какая именно часть кода нужна для решения этой проблемы, не могу скинуть всё физически, т.к. приложение очень большое. Что я пробовал:

Переносил функцию во vuex и обратно
Вызывал функцию из mounted
Менял аргумент async на true в xhr
Меня url запроса
Убирал первую функцию из кода

Ничего из вышеперечисленного не помогает, что я делаю не так? Почему первая функция выполняется, а вторая нет? В чём разница? P.S. как посмотреть ответ сервера, чтобы убедиться, что там есть этот заголовок который так хочет от меня js?

Upd1: В логах backend сервера увидел, что запрос не доходит до него

Answer 1

CORS это политика браузера для POST запросов, чтоб предотвратить спам и изменение данных с другого сайта. Если адрес странички не совпадает с адресом запроса, то сначала выполняется метод OPTIONS, а потом POST. Решить задачу можно 3 способами.

На бэкэнде на метод OPTIONS поставить ответ с хидером Allow-Origin

Настроить прокси на вэб сервере и запрашивать бэкэнд через прокси.

Использовать jsonp - но это уже не xmlhttprequest

Ps не делай никаких действий кроме выдачи контента по запросу GET. Это не безопасно!

Answer 2

Простите все node.js разработчики. Желаю всего наилучшего создателям js и vue. Можете закидать меня тухлыми помидорами. Чтобы этот ... запрос заработал нужно было просто добавить косую черту в конец url, то есть делать запрос не на 'http://127.0.0.1:8000/api/v1/articles/list', а на 'http://127.0.0.1:8000/api/v1/articles/list/'. Причём в первом варианте это работает совершенно рандомно, если js захочет, то он отправит запрос, а если у него плохое настроение, то он будет ругаться на CORS и винить backend, хотя он даже не получил никакого ответа, из чего этот язык делает вывод, что виноват CORS я не понимаю. А первая функция и без косой черты работает нормально. Это божественный язык. К решению пришёл совершенно случайно, когда изменил запрос на POST и у js было хорошее настроение, он всё-таки решил на 10 000 попытке отправить мой запрос, backend выдал warn в логах, что в конец следовало бы добавить '/'

БЛОГ НА HUSL

XMLHttpRequest во vue.js

Ответы (2 шт):