Конфигурация политики CORS с React

[codetricity (Craig Oda)]

Я хочу получить доступ к API Discourse с помощью React.

Я получаю следующую ошибку:

localhost/:1 Доступ к XMLHttpRequest по адресу 'https://community.oppkey.host/posts.json' с источника 'http://localhost:3000' заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.

Вот мои настройки CORS, выполненные через панель администратора Discourse.

На сервере Discourse в файле /var/discourse/containers/app.yml у меня указано следующее:

Вот как я пытаюсь получить данные из API Discourse.

export const DiscoursePanel = () => {
    const [ allData, updateData ] = useState([]);
	
	useEffect(() => {
         const apiEndPoint = 'https://community.oppkey.host/posts.json';
         /* const apiEndPoint = 'https://jsonplaceholder.typicode.com/posts'; */
        console.log("trying to get API on " + apiEndPoint);
		axios
        .get(apiEndPoint)
		.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})
		.catch((err) => console.log(err));
    }, []);

Если я использую внешний сервер с тестовыми данными, код на React работает.

Я не до конца понимаю, как вообще работают CORS и React, поэтому буду признателен за любую помощь.

У меня уже всё работает с использованием прокси-сервера API, который я написал для пересылки вызовов API с сервера Discourse на другой REST API-сервер, к которому подключён React. Хотя это работает, процесс получается медленным. Я хотел бы отправлять запросы к API напрямую из React к конечным точкам API Discourse.

[gassim (Al-Gassim Sharaf Addin)]

Привет, @codetricity

Извините, что вы не нашли ответа на этот пост. Я использую React fetch и прошел через шаги, аналогичные тем, которые вы упомянули выше, но запрос всё ещё блокируется «политикой CORS».

Подскажите, пожалуйста, нашли ли вы решение этой проблемы или ресурс, объясняющий решение. Спасибо!

[codetricity (Craig Oda)]

Привет, я не помню, что именно я в итоге сделал. Хотя я только что проверил, и сайт на React всё ещё работает, получая данные из Discourse (на отдельном сервере).

Так как использование React с Discourse — это распространённая практика, думаю, кто-то другой сможет ответить на ваш вопрос. Извините, что не могу вспомнить решение. Удачи.

[gassim (Al-Gassim Sharaf Addin)]

Привет!
Спасибо за быстрый ответ!

@codetricity

.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})

Если у вас есть пара минут и доступ к тому же коду, не могли бы вы проверить, были ли добавлены дополнительные заголовки? (без самой конфиденциальной информации…)

Выше указано: «No 'Access-Control-Allow-Origin' header is present», поэтому я думаю, что дополнительные заголовки должны были быть добавлены?

Заранее спасибо!