Как взаимодействовать с API на Node.js?

Question

[Vladimir Boldt]

Здравствуйте. Только начинаю осваивать взаимодействие с API на Node.js. Проработал несколько примеров стека MERN. Но сейчас столкнулся с задачей, к которой в виду отсутствия опыта не знаю как подступиться. Мне нужно хотя бы общее направление и пример одного запроса.
Итак, имеется файл index.js где прописан API, также имеется файл теста запросов. Моя задача написать простой фронтенд для взаимодействия с API: отображать и создавать пользователей, отображать и создавать временные отрезки для пользователей (например для учёта работы над проектом).
Использовать хочу чистый JavaScript. Изменять API разрешено, но так как у меня в этом направлении пока ещё совсем мало опыта, то планирую если и делать это, то незначительно.
Что мне не понятно, так это как подсоединить index.html и подключенный к нему JavaScript файл к имеющемуся API. В учебных примерах с которыми я работал раньше использовался Express и там я мог указать какой файл запускать при запуске сервера, как это сделать в моём случае я не представляю.
Ещё один пункт с которым столкнулся впервые - cold start. Означает ли это ттолько более долгое ожидание после первого запроса или грозит ещё какими-либо сложностями?
Проект лежит на https://github.com/khiukv/node-api

Буду благодарен за любые подсказки!

Answer 1

[Kovalsky]

"имеется файл index.js где прописан API" - если это означает, что в файле index.js лежит код сервера реализующего некий API, то предположим что этот сервер развернут по адресу API_URL. В таком случае для подключения Index.html к API достаточно чтобы скрипты (в вашем случае это frontend.js) на странице index.html обращались к API_URL. Например если во frontend.js будет код fetch(API_URL + "/users").then(r => r.text()).then(console.log), то при загрузке страницы index.html в консоль будет выведен список пользователей

"В учебных примерах с которыми я работал раньше использовался Express и там я мог указать какой файл запускать при запуске сервера" - эта фраза что значит? Лучше покажите примером. Если я все правильно понимаю, то по вашей ссылке код index.js как раз реализует сервер,

Собственно, отвечая на вопрос "как взаимодействовать с API на node.js": так же как и с любым другим API - поднимаете сервер реализующий API и обращаетесь к нему

Comments

[Vladimir Boldt]

""В учебных примерах с которыми я работал раньше использовался Express и там я мог указать какой файл запускать при запуске сервера" - эта фраза что значит? Лучше покажите примером."
Здесь я имел в виду что то вроде:
const app = express()
app.use(express.static(path.resolve(__dirname, 'client')))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'index.html'))
})
Где client - это имя папки, а index.html - файл который служит в качестве "фронтенда"

[Kovalsky]

Vladimir Boldt, понятно. Это код сервера для сайта, то есть он отдает index.html. Ну это ситуацию никак не меняет, просто теперь вы вместо того чтоб запускать оба приложения - сайт и сервер API - на express, запускаете только сервер API на ноде, а уж сайт можете поднять где хотите, хоть локальный файл открывайте.

[Vladimir Boldt]

Kovalsky, Спасибо за советы! Буду пробовать!

[Kovalsky]

Vladimir Boldt, собственно вам никто не мешает так же как и в учебном приложении поднять сайт на экспрессе, а API отдельно. Тогда в коде сайта вам нужно будет обращаться к адресу на котором развернут сервер API

[Vladimir Boldt]

Kovalsky, Спасибо за помощь, становиться понятнее логика того что и как работает, но всё постоянно упирается в детали реализации. Например как мне используя данное API обращаться не к localhost, а к https://morning-harbor-70967.herokuapp.com? Ведь если я запускаю Node сервер, а затем запускаю, например, в VSCode index.html с подключенным к нему frontend.js с помощью LiveServer. Тогда получается, что API срабатывает только если в frontend.js я обращаюсь к localhost:3000/users, а мне нужно что бы срабатывал при обращении к https://morning-harbor-70967.herokuapp.com.
Пробовал написать фронтенд обращаясь к API https://morning-harbor-70967.herokuapp.com, но тогда при post запросах имею ошибку "has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
В общем моя проблема, что я не доконца понимаю технические моменты реализации, что где нужно написать. Или какие варианты возможны, а какие нет.
Я понимаю, что эта задача выше моего уровня, но именно сложные задачи и мотивируют меня больше всего :)

[Kovalsky]

"Пробовал написать фронтенд обращаясь к API https://morning-harbor-70967.herokuapp.com, но тогда при post запросах имею ошибку "has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource" - это просто защита от несанкционированного доступа. Как предназначенную для вас посылку сотрудник почты отдаст только вам и никому другому, так и сервер отдаст данные (а точнее разрешит получение) только авторизованным клиентам. Этот механизм называется cors. Рассказывать об этом можно долго, там куча нюансов и тонкостей. Короче говоря, сервер по адресу https://morning-harbor-70967.herokuapp.com/ не разрешил получение данных для той страницы с которой вы послали запрос

[Vladimir Boldt]

Kovalsky, Спасибо за ответ, разобрался со всеми проблемами :)