React による CORS ポリシー設定

[codetricity (Craig Oda)]

Discourse API を React で利用したいと考えています。

以下のエラーが発生します：

localhost/:1 Access to XMLHttpRequest at 'https://community.oppkey.host/posts.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Discourse の管理パネルで設定している CORS 元設定は以下の通りです。

Discourse サーバー側では、/var/discourse/containers/app.yml に以下が設定されています。

Discourse API を取得しようとしているコードは以下の通りです。

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 プロキシサーバーを介して、Discourse サーバーからの API 呼び出しを別の REST API サーバーに中継し、React と接続する仕組みは動作しています。ただし、この方法では速度が遅いです。React から直接 Discourse の API エンドポイントへ API 呼び出しを送信したいと考えています。

[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);
		})

もしよろしければ、同じコードにアクセスして、追加のヘッダーが追加されたかどうか確認していただけますでしょうか？（機密情報自体は除く…）

「Access-Control-Allow-Origin ヘッダーが存在しません」と表示されているので、追加のヘッダーが追加されたのではないかと思います。

よろしくお願いいたします！