Для подключения Headless CMS (например, Strapi или Directus), развёрнутой на вашем VPS, к фронтенду на React или Vue.js, с учётом настроек CORS-заголовков, выполните следующие шаги:

1. Настройка CORS на сервере Headless CMS:
   • Войдите в административную панель вашего Headless CMS (Strapi или Directus).
   • Найдите раздел настроек CORS. Обычно он находится в настройках безопасности или сети.
   • Добавьте разрешённые источники (origins), с которых будут поступать запросы. Например, если ваш фронтенд работает на localhost:3000, добавьте этот адрес в список разрешённых источников.
   • Убедитесь, что разрешены необходимые методы HTTP (GET, POST, PUT, DELETE и т.д.) и заголовки.
2. Настройка фронтенда:
   • В вашем проекте React или Vue.js настройте запросы к API Headless CMS. Используйте библиотеку fetch или axios для отправки HTTP-запросов.
   • При отправке запросов указывайте правильный URL API вашего Headless CMS.
   • Если требуется, добавьте необходимые заголовки в запросы, например, Authorization для аутентификации.
3. Обработка ответов от сервера:
   • Обрабатывайте ответы от сервера Headless CMS в вашем фронтенде. Проверяйте статус ответа и обрабатывайте данные, полученные от сервера.
   • В случае ошибок обрабатывайте их соответствующим образом, например, отображая сообщение об ошибке пользователю.
4. Тестирование:
   • Запустите ваш фронтенд и убедитесь, что запросы к API Headless CMS работают корректно.
   • Проверьте, что данные успешно загружаются и отображаются на странице.

Пример настройки CORS в Strapi:

• Откройте файл config/middlewares.js в корне вашего проекта Strapi.
• Найдите middleware cors и убедитесь, что он включён.
• Настройте параметры CORS, например:

module.exports = ({ env }) => ({ setupMiddlewares: (api) => { api.use(cors({ origin: [''], // разрешённые источники methods: ['GET', 'POST', 'PUT', 'DELETE'], // разрешённые методы allowedHeaders: ['Content-Type', 'Authorization'], // разрешённые заголовки })); }, });

Пример настройки запроса в React с использованием axios:

import axios from 'axios'; const apiUrl = ''; const getData = async () => { try { const response = await axios.get(`${apiUrl}/posts`); console.log(response.data); } catch (error) { console.error(error); } }; getData();