Отправка изображений в теле текста React

105

27 декабря 2020, 04:50

Пытаюсь отправить данные из input и textarea из React на node. В качестве WYSIWYG использую ReactQuill.

sendArticle = _ => {
    const article = this.state;
    const ID = JSON.parse(localStorage.getItem('Welcome'));
    fetch(`http://localhost:4000/post/article?topic=${article.topic}&subtopic=${article.subtopic}&body=${article.body}&id=${ID.user_id}`)
        .then(response => response.json())
        .catch(err => console.error(err))
};

В body попадают изображения, которые также добавляются в textarea параллельно с текстом. Без изображений данные уходят и на сервере я их получаю. При добавлении изображения к тексту вылезает failed to fetch, а также

has been blocked by CORS policy: 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.

При смене mode на no-cors данные не отправляются и появляется ошибка

Unexpected end of input

Каким образом можно отправить данные на сервер и в чем проблема?

Answer 1

Таким образом метод fetch построить не удалось, видоизменить пришлось. Но в любом случае следующая реализация в полной мере позволяет передавать изображения в теле текста. Далее уже можно на сервере распределять данные.

fetch(`http://localhost:4000/post/article`, {
        method: 'POST',
        body: JSON.stringify({
            topic: article.topic,
            subtopic: article.subtopic,
            body: article.body,
            id: ID.user_id,
            description: article.description,
        }),
        headers: {"Content-Type": "application/json"},
    })