Почему запрос через fetch не работает?

Question

[Сергей Бурдужа]

Добрый день.
Сделал запрос в postman и он успешен.
Там в заголовках нужно передать 3 параметра, логин, пароль и api key.

Работают оба, и get и post.

Но, когда пытаюсь получить данные через fetch, во vue, то получаю 400 bad reqeust.

created () {
      fetch("https://api.agimonline.com/v1/properties/list", {
          method: "POST",
          mode: "no-cors",
          headers: {
            "X-Api-User": "###",
            "X-Api-Pwd": "###",
            "X-Api-Key": "###"
          }
        }
      )
        .then(res => res.json())
        .then(data => console.log(data))
    }

Чего я не учел?

Заранее благодарен.

Answer 1

[Ross Alex]

В fetch

mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin'

и со стороны сервера Headers:

Access-Control-Allow-Origin: * // или referer server name
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

Answer 2

[Дима Паутов]

Ну так POST это отправка данных, а не получение данных.
Возможно POST запрос у этого route есть, но он ожидает передаваемых данных, которые вы не передаёте.

Comments

[Сергей Бурдужа]

Если я поменяю на GET, то будет тоже самое и в postman.

[Сергей Бурдужа]

Ссылка на ошибку https://i.imgur.com/EnuC44p.png

[Дима Паутов]

Сергей Бурдужа, может в конце нужно поставить /? У меня такое бывало

[Сергей Бурдужа]

Дима Турков, Постивил, не сработало.
Походу проблема в том, что я заблокировал cors. И у меня headers не отправляются, а там данные доступа.
Если отправляю без no-cors, то выходит

Access to fetch at 'https://api.agimonline.com/v1/properties/list/' from origin 'http://iconsulentiimmobiliari.cf' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

А как cors лечится, на стороне сервера?

[Дима Паутов]

Сергей Бурдужа, Корс - это фича браузера, не сервера. На стороне сервера, ваш url должен быть прописан как доверительный, тогда вы сможете слать к нему запрос.

[Сергей Бурдужа]

Дима Турков, Спасибо.

Как решу проблему, отпишусь.

[Дима Паутов]

Сергей Бурдужа, попробуйте поигаться с свойстваим у fetch

а именно mode и credentials

[Сергей Бурдужа]

Дима Турков, Уже пытался

[Сергей Бурдужа]

Ross Alex, Только у меня не same-origin.
Сайт на wordpress, работаю с javascript через vue cdn.

created () {
      fetch("https://api.agimonline.com/v1/properties/list/", {
          method: "GET",
          headers: {
            "Access-Control-Allow-Origin": "*",
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            "X-Api-User": "###",
            "X-Api-Pwd": "###,
            "X-Api-Key": "###",
            'Cache-Control': null,
            'X-Requested-With': null
          }
        }
      )
        .then(res => res.json())
        .then(data => console.log(data))
    }

А доступа к серверу нету.

[Сергей Бурдужа]

Ross Alex, Просто у меня небольшой фильтр, и я хочу его реализовать через vue.

[Ross Alex]

API не ваше? Стоит на другом домене?

[Сергей Бурдужа]

Ross Alex, Да

И у них в документации пишут, что работают с данными через curl, а мне нужны в js.

[Ross Alex]

Сергей Бурдужа, они так написали потому что их backend не имеет заголовков для браузерных CORS заголовков... Ваш запрос не пропустит браузер. Я попробовал с вашими данными из браузера и из Python. Из браузера не работает, ошибка - отсутствие Access-Control-Allow-Origin в заголовках ответа сервера.

[Сергей Бурдужа]

Ross Alex, Спасибо, нужно будет с ними связатся.

[Ross Alex]

Не за что... Будьте аккуратней с публикацией кода и логинами/паролями внутри :)

[Сергей Бурдужа]

Ross Alex, спасибо. Я уже придумал как сделать. Через curl php получаю данные, а там их во vue вставлю. Такой винегрет.

[Ross Alex]

Сергей Бурдужа, ну это единственный нормальный, в данном случае, вариант. Только со стороны backend'а запросы делать. Там же вы можете кешировать некоторые запросы в API на 5-15 минут, чтобы избавиться от ненужных повторных запросов в API и уменьшить время ответа.