Давайте подключим вас и спереди, и сзади в этот последний день портфолио проекта mentorleo.co 💪

Ранее:

За неделю 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