FROM CACHE - jp_header

proxy経由でカスタムアプリ(remix)にリクエストした場合、レスポンスが返ってこない

解決済

proxy経由でカスタムアプリ(remix)にリクエストした場合、レスポンスが返ってこない

nomin
Shopify Partner
32 5 4

最終的なやりたいこととしてはテーマ(クライアント側)からproxy経由でカスタムアプリ(remix)からadmin apiにリクエストし、顧客データの登録/更新/削除ができるようになることです。

その過程で今回の質問のタイトルにある通り、proxyからカスタムアプリにリクエストするところまではできているのですが、レスポンスが返ってこないというのが今の状況になります。

下記が実装の内容と流れです。
※カスタムアプリからadmin apiへのリクエストは今回の質問とは関係ないので一旦外しています。なので、クライアント側からproxy経由でカスタムアプリにリクエストして、カスタムアプリからレスポンスを受け取るという流れになります。

以下のような流れで検証しました。
1.「アプリ設定」から「アプリproxyの設定をする」
2.クライアント(テーマ)からproxyにリクエスト

3.proxy元のカスタムアプリ(下記)にリクエスト(GET)

https://xxxxxxxxxx-xxxxxxx-xxxxxxxxx.trycloudflare.com/test

 4.カスタムアプリ側からレスポンスを返す

 

 

export async function loader({ request }) {
  console.log('request request')
  return json(
    { 
      data: {
        message:'success'
      } 
    }
    ,{ 
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      status: 200
    }
  )
}

 

 

 5.クライアント(テーマ)で受け取る。
クライアント側のレスポンスを見ると、ステータスコードは受け取れてるようですが、
レスポンス内容が空で、fetch箇所のpromiseがpenndingのままです。

remixテンプレートは出たばかりで、情報が少ないのでどなたか詳しい方いましたらご回答いただけると嬉しいです。

1 件の受理された解決策

nomin
Shopify Partner
32 5 4

成功

リクエストテンプレートにカスタムアプリで使用するようなマークアップ箇所を含めてしまってました。

export default function Test() {
  return (
    <>
      <h1>会員追加</h1>
    </>
  );
}

凡ミスでした。

元の投稿で解決策を見る

1件の返信1

nomin
Shopify Partner
32 5 4

成功

リクエストテンプレートにカスタムアプリで使用するようなマークアップ箇所を含めてしまってました。

export default function Test() {
  return (
    <>
      <h1>会員追加</h1>
    </>
  );
}

凡ミスでした。