0

У меня уже едет крыша, то ли я совсем перестал соображать к концу дня, то ли 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. Я не знаю какая именно часть кода нужна для решения этой проблемы, не могу скинуть всё физически, т.к. приложение очень большое. Что я пробовал:

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

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

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

2
  • для каких целей вы используете XHR, если с фетчем нет проблем ?
    – ccxdec
    2 апр 2020 в 19:22
  • @ryzen там вместо GET должен быть метод DELETE, но он так же не работал и я заменил его на GET, чтобы посмотреть работает ли он
    – Inventor
    3 апр 2020 в 2:25

2 ответа 2

0

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

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

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

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

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

0
0

Простите все 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 в логах, что в конец следовало бы добавить '/'

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.