Давайте подключим вас и спереди, и сзади в этот последний день портфолио проекта mentorleo.co 💪
Ранее:
- Неделя 1: интерфейс с голым HTML, CSS и Javascript
- Неделя 2: интерфейс с React, WebPack и SASS
- 3 неделя: сервер Node.js с базой данных MongoDB
За неделю 3/день 4 вы каждый день автоматизировали заполнение своей базы данных свежими предложениями о работе.
Сегодня будет самый простой день и последний в портфолио проекта. Вы подключите свое приложение React к серверу Node.js 🚀
Включите CORS на вашем сервере
Совместное использование ресурсов из разных источников (CORS) — это механизм, который позволяет запрашивать ограниченные ресурсы (например, шрифты) на веб-странице из другого домена за пределами домена. из которого был обслужен первый ресурс. Веб-страница может свободно встраивать изображения из разных источников, таблицы стилей, сценарии, iframe и видео. [2] Однако некоторые междоменные запросы, в частности запросы Ajax, запрещены по умолчанию политикой безопасности того же происхождения.
cf https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Ваш интерфейс и ваш сервер будут находиться на разных доменах. Поэтому все ajax-запросы на получение заданий от начала до конца не будут выполнены.
Это проблема, с которой вы уже сталкивались на первой неделе. Для решения этой проблемы вы использовали трюк под названием JSONP. Но вы не хотите, чтобы он был в вашем стеке, потому что для него нужно адаптировать серверную часть, а это не самый чистый способ решения проблемы.
Существует модуль expressjs для обработки CORS, который чрезвычайно прост в использовании. Используйте документацию проекта, чтобы установить и настроить его. Предпочитайте разрешить CORS только на маршруте GET /jobs. Плохая практика — открывать его для всех маршрутов, если он нам не нужен.
Документация: https://github.com/expressjs/cors#enable-cors-for-a-single-route
Подключите переднюю
- удалить поддержку jsonp из суперагента (библиотека для обработки Ajax, см. неделя 2/день 5)
- вызовите маршрут GET /jobs на вашем сервере, где вы ранее напрямую вызывали github
- сделать так, чтобы ваш бэкенд работал все время на CleverCloud, см. week3/day3
Вот и все ! 👍
Конец проекта
Теперь у вас есть красивый и автоматизированный стек для запуска динамического портфолио. Следите за новыми проектами и найдите время, чтобы добавить функции в свое портфолио, теперь, когда вы работаете со многими концепциями! 😎
Призыв к действию
Присоединяйтесь к нам и получите помощь от профессиональных наставников!
Подать заявку здесь, это всегда будет бесплатно ♥ https://mentorleo.co