LINUX.ORG.RU
Форум — Web-development  

Javascript + fetch = Node.js

 , ,


0

1

Доброго всем дня!

Решаю следующую задачу: на HTML-странице, использующей css и javascript (естественно все файлы расположены в любой папке на клиенте) необходимо, в зависимости от введённой пользователем информации, записать значения полей в текстовой файл, чтобы потом при открытии этой страницы - можно было данные подгрузить и считать, а не набирать заново.

Девелоперы (я - не они) подсказали, чтобы я забыл об этом и думал в сторону Node.js. Ну я подумал и решил протестить решение. В результате чего, на той машине, где HTML-страница был установлен и запущен Node.js в режиме Express со всеми нужными модулями.

Сервер Node.js express работает.

Но, сервер не может получить от клиента данные в виде json.

Прочитал официальные данные с сайта (например эти: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) и аккуратно в javascipt’е готовлю данные для вызова fetch. И как бы я данные не подготавливал - Node.js постоянно в функции app.post(‘/data’, function(request, response) получает в request.body данные в виде undefined.

Я заморочился и снифером поймал пакеты от клиента к серверу и обратно и увидел, что как бы на клиенте я старательно не готовил поле Content-Type в значение application/json, но в пакете HTTP в сторону сервера упорно присутcтвует знвчение text/plain для Content-Type. Я полагаю, что именно здесь, роется причина того, что сервер не может принять данные от клиента.

Хотя-мне json в принципе и не нужен - нужно просто передавать строку на сервер для записи в файл, но насколько я понимаю при общении с Node.js нужно обязательно использовать json.

Подскажите пожалуйста, что username делает не так и как можно спасти отца русской демократии от неминуемого провала?

Спасибо.

← Как делать 404 подсказки для поисковика
Проблема с Perl генерация HTML →
Ответ на: комментарий от skyman

Да, про localstorage рассматривался вариант, но мне не понятно подходит ли он, если нужно разные вводимые пользователем данные сохранять под разные задачи. Например, один раз - данные нужны для проекта А, а в другой раз - для проекта Б.

Ramirezkiv2
() автор топика
Ответ на: комментарий от vbr

Содержимое обработчика нажания кнопки на форме для отправки тестовых данных на сервер Node.js:

async function SaveConfigMenu_onclick() {

const myOptions = {
  mode: "no-cors",
  method: "POST",
  headers: {
    "Content-Type": "application/json; charset=UTF-8",
  },
  body: JSON.stringify({
    name: "Gurav",
    age: 42
  })
};
	
await fetch('http://localhost:3000/data', myOptions)
  .then((response) => response.json())
  .then((json) => console.log(json));
}

Содержимое файла app.js, на стороне Node.js:

const express = require('express')
const bp = require('body-parser')
const app = express()
const port = 3000

app.use(bp.json());
//app.use(bp.urlencoded({extended: true}));

app.get('/', (req, res) => {
	console.log("req.body = "+req.body)
    res.send('Nodejs answer is Hello World!')
})

app.post('/data', function(request, response){
    console.log("Data accepted from Client");      // your JSON
    response.setHeader('Content-Type', 'application/json')
    response.write('you posted:\n')
	response.end(String(JSON.stringify('{"hello":"world"}')))
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
Ramirezkiv2
() автор топика
Ответ на: комментарий от skyman

Хммм! Надо будет попробовать. Подскажите, физическое расположение localstorage в файловой системе - одно, на всю систему или в зависимости от папки, в которой находится HTML-страница? Ну то есть, для проекта А - я делаю папку «Проект А» и запуская оттуда HTML и сохраняя значения нужных данных сохранение будет идти в этой папке, а для проекта Б - в папке «Проект Б»?

Ramirezkiv2
() автор топика
Ответ на: комментарий от Ramirezkiv2

В режиме no-cors браузер разрешает Content-Type только application/x-www-form-urlencoded, multipart/form-data, или text/plain.

Ещё в ответе с сервера должен быть валидный json без you posted:\n, иначе fetch.json() не сможет распарсить.

anonymous
()
← Как делать 404 подсказки для поисковика
Web-development
Проблема с Perl генерация HTML →