gitHub Codespace で localhost に GETリクエストする際の注意点

動機

gitHub の codespace は簡単に開発環境が用意できますが、開発中に localhost へ接続したい場合は、Codespace のポートフォワーディングを用いて、ブラウザから接続しないといけません。

今回、クライアント側から Codespace 上のサーバーに fetch を使った GETリクエストを送る際に、エラーが出てはまってしまったので、それへの対処法をまとめました。

環境

• gitHub Codespace (default 設定）
• Next.js 14.2.3

エラーの発生状況

1. gitHub の開発リポジトリから Codespace を起動。その際、3000番ポートが 動的 URL ( https://expert-***-3000.app.github.dev など) に紐づけられる (ポートフォワーディング)
2. Codespace の ターミナルで Next.js サーバーを起動 (3000番ポート)
   npm run dev
3. バックエンドサーバーの API (例えば、https://expert-***-3000.app.github.dev/api/read)に JSONデータを GETリクエストする

const response = await fetch("https://expert-***-3000.app.github.dev/api/read");
  
const jsonData = await response.json();

1. . この際に、response に JSONデータではなく、HTMLが返されてしまい、response.json() がエラーになる

原因

Codespace のポートフォワーディングでは、ポートの "表示範囲" が private だとフォワーディング時に認証が必要になる（参考: GitHub Codespaces）。
そのため、fetch で GETリクエストした際に認証ページにリダイレクトされ、その HTML が返ってきたと思われる。

対処法

Codespace のポート設定で、該当のポート（この場合は 3000) の "表示範囲" を public にする。

これでちゃんと JSON データが返ってくるようになった。