Почему при получении запроса в json-строке < заменяется на &lt;?

Question

[Devero97]

Почему при отправке на сервер html кода вроде: <h1>Hello</h1> сам знак < кодируется в совокупность символов? Как можно от этого избавиться и заставить отображаться их по-нормальному?

Answer 1

[Василий Банников]

< и > в html представляются, как < и >
Видимо у вас есть какая-то штука, которая экранирует html для безопасности.
Как отображать по нормальному - это вопрос к используемой технологии.

Comments

[Devero97]

Василий Банников Я использую для отправки на сервер axios. Все по умолчанию. Ничего такого там нет. Что же может быть не так?

[Devero97]

Причем только этот знак < конвертируется, а этот > остается обычным

[Василий Банников]

Devero97, смотрите, в какой именно момент символы заменяются. Может быть, это происходит уже на фронте?

[Devero97]

Василий Банников, К сожалению нет, именно когда данные отправляются. Тоесть с помощью axios я это делаю. Там все автоматически настраивается. application/josn и т.д. Но эта скобка конвертируется, не понимаю вообще и в интернете про это ничего нет

[Василий Банников]

Devero97, а в chrome dev tools как запрос выглядит? Там < нормальное или нет?

[Devero97]

Василий Банников, если отправлять данные и смотреть во вкладке network, то он там уже сконвертирован и выглядит буквами, а не символом. Если я данные только заполняю, то переменная с этими данными и этим знаком нормальная и не сконвертирована. Именно при отправке происходит конвертация

[Василий Банников]

Devero97, а на что он заменяет?

[Devero97]

Василий Банников, я ошибся. Он ничего не конвертирует в девтулзах. Там все нормально. Но уже данные на сервере имеют конвертированныф вид. Это что-то странное. И лишь одна эта скобка меняется.

[Василий Банников]

Devero97, точно на сервере? Дебажил?

[Devero97]

Василий Банников, отправка самого пост запроса конвертирует.

[Василий Банников]

Devero97, так всётаки отправка или получение запроса? Или получение ответа? Или отправка ответа? Или отображение результата?

[Devero97]

Василий Банников, Смотрите, при заполнение на фронте переменной я имею корректную строку, а именно html код. При отправке данных, обычно же при отправке используется метод POST я все еще имею корректную строку и знак < все еще отображается отлично. Тоесть в request payload моя переменная корректна. Но уже ответ от сервера имеет преобразованный вид. Непосредственно на сервере, я проверяю черезе console.log данные, которые мне пришли и получаю уже конвертированный вид. Это происходит на стадии отправки данных. Как только я нажимаю кнопку отправить данные, все отлично. Но затем данные так скажем по пути следования к серверу преобразуются и уже в console.log на сервере имеют измененный вид.

[Devero97]

Василий Банников, Может можно как-то очистить кеш какой-нибудь?

[Василий Банников]

Devero97, всё ещё не понятно, что происходит. Вы даже не написали, что используете на сервере.
Покажите код.
Ну и отлаживать с console.log - это такое себе занятие.

[Devero97]

Василий Банников, Использую node js express js bd - mongodb mongoose.
Код сервера

module.exports.updateCard = asyncHandler(async (req, res, next) => {
  // console.log(req.body.htmlText.replace(/&lt;/g, "<"));
  const card = await Card.findOneAndUpdate(
    {
      card: req.params.card
    },
    req.body,
    { new: true, runValidators: true }
  );

  if (!card) {
    return next(
      new ErrorResponse(`Not found with slug of ${req.params.card}`, 404)
    );
  }

  res.status(200).json({ message: "Карточка успешно обновлена", data: card });
});

На фронте использую vue js

export default {
  data() {
    return {
      htmlText: { html: "" },
    };
  },
  methods: {
    async onSubmit() {
      try {
        const formData = {
          htmlText: this.htmlText,
        };
        console.log(this.htmlText);
        const res = await this.$axios.$put(
          `api/card/admin/${this.$route.params.card}`,
          formData
        );
        alert(res.message);
      } catch (err) {
        alert(res.message, err);
      }
    },
  }
};

Единственное решение придумал сейчас. Просто находить все знаки < и заменять их с символов & l t ; на сам знак < с помощью метода replace

[Василий Банников]

Devero97, я правильно понимаю, что на фронте в this.htmlText лежит нужный html.
А на бэке в req.body.htmlText уже не то?
Посмотрите, какие у вас ещё middleware есть. Может быть, оно экранирует html

[Devero97]

Василий Банников, Вообще нет ничего. Единственный middleware это аутентификация(token etc.). С этим ничего не связано. Я сам сижу уже 3 день и не могу понять что происходит.
Правильно понимаете. Уже на сервере происходит что-то странное

[Devero97]

Василий Банников, Это ооочень странно. Но я решил проблему таким образом

module.exports.updateCard = asyncHandler(async (req, res, next) => {
// Решение
  req.body.htmlText = req.body.htmlText.replace(/&lt;/g, "<");

  const card = await Card.findOneAndUpdate(
    {
      card: req.params.card
    },
    req.body,
    { new: true, runValidators: true }
  );

  if (!card) {
    return next(
      new ErrorResponse(`Not found with slug of ${req.params.card}`, 404)
    );
  }

  res.status(200).json({ message: "Карточка успешно обновлена", data: card });
});

Просто заменой

[Василий Банников]

Devero97, ну это костыль. Мне интересно, что там реально происходит.

[Devero97]

Василий Банников, Я вообще без понятия. Да хоть какой костыль. Потому что надо как-то работать. Я не знаю что еще может не так быть. Вы можете попробовать у себя где-то попробовать отправить строку с html кодом? Или Вам еще какие-нибудь данные нужны?

[black1277]

Проверьте еще сам html код формы, там может быть незакрытый тег или лишняя скобка или еще что-нить.