NgrokでGETメソッドを使用する

はじめに

Ngrokとはhttp://localhost:3000/ などの開発環境をhttps:// にて外部公開できるサービスです。

Ngrokの使い方はこちらの記事などを参考にしてください。

GETメソッドが送信できない

下記の実装でGETメソッドが送信できませんでした。

export const useFetchAbc = () => {
  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const url = `${baseUrl}/abc`;
  const fetchAbc = async () => {
    try {
      const response = await fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        },

POSTメソッドは問題なかったので同じように書いて上記となっていました。
Ngrokの警告？ページにアクセスして目的のエンドポイントまで到達出来なかったです。

hedersに追加すると出来ました！

下記に変更するとアクセスできました。

export const useFetchAbc = () => {
  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const url = `${baseUrl}/abc`;
  const fetchAbc = async () => {
    try {
      const response = await fetch(url, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
          "ngrok-skip-browser-warning": "true", //この行を追加
        },

同じ内容でうまくいかない方は試してみてください。
ありがとうございました。