Как отправить запрос POST с переменными в React?

avatar
Lance
9 августа 2021 в 05:03
775
1
1

Я учусь отправлять запросы POST в API с помощью React.

Чего я сейчас пытаюсь добиться, так это отправить запрос POST в API. API вставит событие примерно так (как называется этот метод?): https://api.com/WebService.asmx/insertEvent?event_id=5&desc=<p>HelloWorld</p>&name=testing

Метод, который я сейчас использую как POST, показан как метод POST и возвращает меня с ошибкой unexpected token '<' in json at position 0 и результат, который я получаю, когда я console.log(JSON.stringify(event)) выглядит примерно так:

{"event_id":"5","desc":"<p>HelloWorld</p>","name":"testing"}```

Метод POST

const response = await fetch('https://api.com/WebService.asmx/insertEvent', 
         {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify(event)
        })

Изменить: я исправил указанную выше ошибку, закодировав HTML-код, который мне нужно отправить. Это мой последний метод POST, но по какой-то причине я все еще сталкиваюсь с ошибкой 500, хотя он работает, когда я копирую и вставляю URL-адрес+параметры из console.log, в котором отображается ошибка:

const addBulletin = async (event) => {
        console.log(event, '--event')
        const url = 'https://api.com/WebService.asmx/insertEvent';
        axios.post(url, null, { params: {
            title: event.title,
            desc: event.desc,
            image: event.image,
            employee: event.employee,
            entity: event.entity,
            startDate: event.startDate,
            endDate: event.endDate,
            createdBy: event.createdBy
        }})
        .then(response => console.log(response.status))
        .catch(err => console.warn(err));
    };

Редактировать: я протестировал API в ванильном JS-проекте, используя .ajax с POST, и он работает, поэтому я думаю, что с API не должно быть проблем.

var json = $('.insert-form').serialize();

$.ajax({
        type: "POST", 
        url: "https://api.com/WebService.asmx/insertEvent",
        data: json,
        async: true,
        success: function (response) {
            alert("Event has been successfully created!");
        },
        error: function (response) {
          console.log(response);
        }
      });
Источник
negin motalebi
9 августа 2021 в 05:05
0

Какой у вас бэкэнд-фреймворк?

im_baby
9 августа 2021 в 05:11
3

Вы должны отправлять данные в параметрах запроса, как в первом примере? Или вы должны отправить тело json?

Rahul
9 августа 2021 в 05:23
0

используйте пакет query-string, который анализирует и упорядочивает строки запроса URL

ale917k
9 августа 2021 в 05:29
0

См. coderhelper.com/a/14551320/11895568.

Lance
9 августа 2021 в 05:36
0

Мой сервер — MySQL, и я должен отправлять данные в параметрах запроса (теперь я знаю, как это называется). Так что я все время поступаю неправильно, отправляя в виде тела json.

j-petty
9 августа 2021 в 06:49
0

Ошибка предполагает, что вам может понадобиться просмотреть URL-кодирование значений, которые вы отправляете в параметрах запроса.

Lance
9 августа 2021 в 11:48
0

Это странно, я закодировал свой HTML, и он исправил эту ошибку, но теперь он имеет ошибку 500, хотя вставка работает, когда я скопировал и вставил URL-адрес + параметры из ошибки консоли.

im_baby
9 августа 2021 в 13:14
0

Ошибка 500 (должно) указывает на ошибку на бэкэнде. Похоже, POST исправлен, теперь вы должны посмотреть на API и почему он не может обработать запрос.

Lance
9 августа 2021 в 13:28
0

Но если прямое копирование и вставка URL-адреса API + параметры в браузере работает, означает ли это, что бэкэнд имеет ошибку?

im_baby
9 августа 2021 в 13:34
0

Браузер выполняет запрос GET, когда запрашивает URL-адрес. POST обычно происходит для событий формы или других клиентских JS. Я подозреваю, что вы должны использовать GET.

Lance
9 августа 2021 в 13:52
0

Я протестировал API в ванильном JS-проекте, используя .ajax с POST, и он работает, поэтому я думаю, что API не должно быть проблемой. Я разместил код .ajax в своем сообщении выше.

Lance
10 августа 2021 в 01:25
0

@im_baby Я пытался использовать запрос GET в крайнем случае, и это сработало отлично, большое спасибо!

Ответы (1)

avatar
Ikdemm
9 августа 2021 в 08:47
0

API, которому вы отправляете запрос, ожидает параметр запроса (данные в URL-адресе). https://api.com/WebService.asmx/insertEvent?event_id=5&desc=<p>HelloWorld</p>&name=testing В этом запросе мы отправляем 3 параметра запроса: event_id, desc и name.

.

Чтобы отправить такой запрос из React, вы не должны использовать тело запроса. Вместо. Советую использовать axios, чтобы было проще. Это очень мощная библиотека, лучше, чем использование fetch. Делать это нужно так:

axios.post(`https://api.com/WebService.asmx/insertEvent`, null, { params: {
  event_id: eventId,
  desc
}})
.then(response => response.status)
.catch(err => console.warn(err));

Это может помочь: Как опубликовать параметры запроса с помощью Axios?

Lance
9 августа 2021 в 08:56
0

Я попробовал предложенный вами метод с использованием axios, который, вероятно, сработал, но я все еще получаю ту же ошибку: от клиента было обнаружено потенциально опасное значение Request.QueryString (desc="<p> Hello World!</p> ") Я думаю, это потому, что я пытаюсь сохранить html в БД, что я пытался избежать тегов html, используя: const desc = htmlContent.replace(/< /g, '<').replace(/>/g, '>'); Но он все еще показывает ту же ошибку.

Ikdemm
9 августа 2021 в 09:19
0

Это из-за значения <p>Hello World</p>. API отправляет обратно это ответное сообщение. Если вы отвечаете за API, вы можете деактивировать это сообщение. Хотя это и не рекомендуется.

Lance
9 августа 2021 в 09:54
0

Хорошо, теперь, когда я закодировал html-код с помощью const desc = encodeURIComponent(htmlContent.replace(/'/g, '\'\'')), запрос POST по-прежнему не работает, когда я отправляю запрос через app (получает ошибку 500), но если я скопирую параметры и вставлю их в браузер вручную, оно действительно успешно вставит событие, поэтому связана ли эта ошибка с методом публикации axios, который я использовал? Я опубликовал метод POST, который использовал в своем исходном сообщении