Как обработать post запрос на nodejs?
Если делаю GET запрос без тела запроса(без category), то все отрабатывает. При изменении запроса на POST и добавление в запрос тела запроса(category) получаю ошибку CORS:
Access to XMLHttpRequest at 'http://localhost:5000/api/todos' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.- Вопрос задан 04 февр. 2023
- 350 просмотров
NodeJS. Как обрабатывать POST запросы.
Всем привет! В этой статье мы рассмотрим, как обрабатывать POST запросы в NodeJS.
POST запросы отличаются от GET запросов, которые мы рассматривали в прошлых статьях, тем, что данные в них передаются в закрытом виде. Это очень часто используется для передачи информации из форм. В прошлой статье мы как раз-таки создали форму, давайте ее и будем использовать для обработки POST запросов.
Поскольку такого удобного метода, как query(), для POST запросов нет, нам нужно установить дополнение под названием Body Parser. Найти вы его можете и скачать на сайте NPM.
После того, как вы его скачали и установили, подключите расширение в файле app.js:
var bodyParser = require(‘body-parser’);
Теперь напишем следующий код:
var urlencodedParser = bodyParser.urlencoded();
Это middleware для POST запросов.
Теперь начнем получать и обрабатывать наш POST запрос:
app.post(‘/contact’, urlencodedParser, function(req, res) res.render(‘contact-success’, );
>);
Этот код делает следующее: когда мы отправляем форму, она ссылается на страницу /contact(т.е. на саму себя) и отправляет туда POST запрос. Мы этот POST запрос перехватываем, используем наш парсер для того, чтобы сразу получить данные в нормальном виде, а затем отрисовываем страницу по шаблону contact-success(мы далее создадим этот шаблон), куда передаем объект data, содержащий объект, который вернулся из ответа метода парсера body(), со свойствами, равными именам полей формы(who, department, email) и значениями, которые мы туда ввели. В общем-то, все просто и, благодаря парсеру, похоже на обработку GET запросов.
Теперь давайте создадим шаблон views/contact-success.ejs, куда скопируем весь код из файла contact.ejs. Удалим форму и в параграфе напишем следующее:
Спасибо за обращение!
Вы связались с из отдела
Мы ответим вам на email:
Думаю, тут все понятно и пояснять не нужно.
А на этом сегодня все. Мы закончили изучение платформы NodeJS, и теперь у вас есть вся необходимая база знаний для того, чтобы создавать отличные приложения на ее основе. Однако, чтобы закрепить знания, мы создадим список дел на NodeJS в ближайшее время! Не пропустите!
Спасибо за внимание и удачи!
Создано 17.03.2017 17:17:17
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
Запрос данных сервера. JavaScript
Вы запускаете код не в браузере. Сервер и браузер — это две разные среды, и код, который работает в одной среде, не обязательно заработает в другой.
- В node.js модуле http , у класса http.Server , инстанс которого вы создаете с помощью метода http.createServer() , нет метода addEventListener() . Он из браузерного DOM API .
- В node.js нет такого класса как XMLHttpRequest . Он есть в виде отдельно загружаемого npm модуля, и в браузерном API. Все реквесты делаются с помощью метода http.request() или других сторонних http-клиентов, например axios .
- Ну и у вас функция req() объявлена внутри обработчика слушателя. Объявлена и никогда не будет вызвана. Вы пытаетесь вызвать ее в последней строчке, но получите req is not defined .
В вашем случае код должен выглядеть примерно так:
const http = require('http'); const https = require('https'); const server = http.createServer((_req, res) => < // создаем инстанс класса http.Server // при запросе к localhost:3000 выполнится этот колбэк res.writeHead(200, < 'Content-Type': 'text/plain' >); // опции запроса к удаленному серверу const options = < host: 'api.coincap.io', path: '/v2/assets?limit=1', method: 'GET', headers: < 'Content-Type': 'application/json', >>; // http запрос вернет нам 301 Permanently Moved, поэтому https https.request(options, (response) => < let str = ''; // данные грузятся не одним куском, а чанками response.on('data', function (chunk) < str += chunk; >); response.on('end', function () < const < priceUsd >= JSON.parse(str).data[0]; // получаем preiceUsd из ответа res.end(priceUsd); // отправляем ответ тому, кто обратился к localhost:3000 >); >).end(); >); server.listen(3000, '127.0.0.1'); Добавил может быть кривоватые комменты в код, но старался, чтобы было понятно, что и для чего.
Вообще поподробнее изучите:
- Документацию по модулю http
- Всё что нужно знать про HTTP
И если хотите работать с бэкендом, лучше начните с фреймворка типа express.js, чтобы не изобретать велосипед.
Axios
Axios — популярная клиент-серверная библиотека для выполнения HTTP-запросов .
Возможности
Axios предоставляет следующие возможности:
- отправка XMLHttpRequest из браузера
- отправка HTTP-запросов из Node.js
- поддержка Promise API
- перехват запросов и ответов
- преобразование данных запросов и ответов
- отмена/прерывание запроса
- автоматический разбор/парсинг данных в формате JSON
- автоматическая защита от XSRF
Установка
yarn add axios # или npm i axios Примеры отправки GET и POST-запросов
// GET-запрос const getUserById = async (userId) => try const response = await axios.get(`/users?id=$userId>`) return response.data > catch (err) console.error(err.toJSON()) > > getUserById('1') // POST-запрос const addNewUser = async (newUser) => try const response = await axios.post('/users', newUser) return response.data > catch (err) console.error(err.toJSON()) > > addNewUser( firstName: 'John', lastName: 'Smith' >) Пример отправки нескольких запросов
// Первый запрос const getUserAccount = () => axios.get(`/user/123`) // Второй запрос const getUserPermissions = () => axios.get('/user/123/permissions') // Отправка обоих запросов const getUserInfo = async () => const [account, permissions] = await Promise.all([getUserAccount(), getUserPermissions()]) return account, permissions > > Настройки запроса
url: '/users', method: 'get', // default baseURL: 'http://example.com', // Преобразование запроса transfromRequest: [(data, headers) => return data >], // Преобразование ответа transformResponse: [(data) => return data >], headers: 'Authorization': 'Bearer [token]' >, data: firstName: 'John' >, // Параметры строки запроса params: id: '123' >, withCredentials: false, // default responseType: 'json', // default responseEncoding: 'utf8', // default // Прогресс загрузки файлов onUploadProgress: (e) => >, // Прогресс скачивания файлов onDownloadProgress: (e) => >, // Максимальный размер ответа в байтах maxContentLength: 2048, // Максимальный размер запроса в байтах maxBodyLength: 2048, proxy: protocol: 'https', host: '127.0.0.1', port: 5000, auth: username: 'John', password: 'secret' > >, // Токен для отмены запроса cancelToken: new CancelToken((cancel) => >) > Схема ответа
data: >, status: 200, statusText: 'OK', headers: >, config: >, request: > > Настройки по умолчанию
axios.defaults.baseURL = 'http://example.com' // Дефолтные настройки общих заголовков axios.defaults.headers.common['Authorization'] = TOKEN // Дефолтные настройки для POST-запроса axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' Перехватчики
Мы можем перехватывать запросы или ответы перед их обработкой в then или catch .
// Перехватчик запроса axios.interceptors.request.use((config) => return config >, (error) => return Promise.reject(error) >) // Перехватчик ответа axios.interceptors.response.use((response) => return response >, (error) => return Promise.reject(error) >) Обработка ошибок
const getUserById = (userId) => try const data > = await axios.get(`/users?id=$userId>`) return data > catch (error) if (error.response) // Статус ответа выходит за пределы 2xx const data, status, headers > = error.response console.error(data) > else if (error.request) // Отсутствует тело ответа console.error(error.request) > else // Ошибка, связанная с неправильной настройкой запроса console.error(error.message) > // Другая ошибка console.error(error.config) // Подробная информация об ошибке console.error(error.toJSON()) > > Отмена запроса
const CancelToken > = axios const source = CancelToken.source() const getUserById = (userId) => try const data > = await axios.get(`/users?id=$userId>`) return data > catch (thrown) if (axios.isCancel(thrown)) console.error(thrown.message) > else // Обработка ошибки > > > // Отмена запроса (параметр `message` является опциональным) source.cancel('Выполнение операции отменено')