Команда cURL работает, но вызов Fetch API возвращает 200 с ошибкой проверки 400 в Response Payload - PullRequest
Новая
       22

Команда cURL работает, но вызов Fetch API возвращает 200 с ошибкой проверки 400 в Response Payload

0 голосов
/ 08 июня 2019

Имея огромную проблему, я столкнулся с отправкой запроса POST, используя Fetch для сокращения URL.

У меня все хорошо, и я могу выполнить запрос POST с помощью команды cURL для этого API сокращения URL:

Команда скручивания

curl -d 'api_key=xxxxxxxxxxxxxx&url=https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch' http://fakeurlforexample/api/shorten/

Ответ

{"url": "https://fakeurlforexample/BdzfM3", "long_url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch", "name": "BdzfM3"}

И я получаю этот замечательный ответ от API.

Но когда я делаю это с помощью Fetch с этим кодом, который я предоставил ниже, я получаю 200 OK, и в полезной нагрузке ответа у меня появляется ошибка 400 проверки, что мне не хватает ключа API.

Однако полезная нагрузка запроса в консоли разработчика показывает, что параметры были правильно переданы в API (я думаю ...)

{"api_key":"xxxxxxxxxxxxxxxxx","url":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"}

Вот мой код:

let get_url = 'http://fakeurlforexample.com/api/shorten/';

    let request = new Request(get_url, {
        method: 'POST', 
        body: JSON.stringify({'api_key':'xxxxxxxxx', 'url': 'https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'})
    });

    fetch(request)
    .then(function() {
        console.log(request);
        console.log(request.url);
     })

Кто-нибудь видит ошибку, которую я здесь делаю?

Это было побеждено этим часами на этой неделе. Спасибо за любую помощь и помощь! И нет, я не могу легко перевести код в axios, как сейчас. Это демонстрация, поэтому я просто пытаюсь заставить ее работать.

Ответы [ 2 ]

1 голос
/ 08 июня 2019

В разделе curl man Опции в -d, --data <data>:

(HTTP) Отправляет указанные данные в запросе POST на сервер HTTP, так же, какбраузер делает, когда пользователь заполнил форму HTML и нажимает кнопку отправки.Это заставит curl передавать данные на сервер с использованием application-type application / x-www-form-urlencoded.Сравните с -F, --form.

В то время как по вашему запросу вы отправляете объект JSON (тип содержимого: application/json): 

let request = new Request(get_url, {
  method: 'POST', 
  body: JSON.stringify({'api_key':'xxxxxxxxx', 'url': 'https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'})
});

Поскольку вы знаете,конечная точка API принимает application/x-www-form-urlencoded, поскольку запрос curl выполняется успешно, вы можете установить тип контента как application/x-www-form-urlencoded и отправить тело в виде строки: 

let request = new Request(get_url, {
  method: 'POST',
  headers: new Headers({'content-type': 'application/x-www-form-urlencoded'}),
  body: 'api_key=xxxxxxxxxxxxxx&url=https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch'
});
1 голос
/ 08 июня 2019

Возможно, потому что вы определяете заголовки 2 раза.

...