CORS、アプリのプロキシURL、およびブラウザからの呼び出し

Webhookは通常、サーバー間での呼び出しが行われます。ブラウザ（ストアフロント、ランディングページ、顧客ポータルなど）からWebhookを呼び出したい場合は、「CORSを有効にする」と**「アプリプロキシURLを使用する**」という2つの設定が重要です。これらはいずれも、Webhookの「詳細設定」内にあります。

CORSを有効にする

受信側のサーバーが許可しないと、ブラウザはクロスオリジンリクエストを拒否します。「**CORSを有効にする」**をオンにすると、Webhookがブラウザのプレフライトリクエストに応答し、呼び出しを受け入れます。

また、プレフライトでは、トークンを含むヘッダー（ご自身で設定したカスタムヘッダー名も含む）を指定できるため、ブラウザがそれを誤認識することはありません。

アプリのプロキシURLを使用する

各Webhookには2つのアドレスがあり、どちらも「URL設定」の下にコピーボタンが表示されています：

URL	どうやら	注記
アプリの直接URL	当社のアプリドメインで、末尾にWebhookのコードが付いたもの	開発環境やパスワードで保護されたストアを含め、常に正常に動作します
アプリのプロキシURL	ショップ独自のドメイン上のパス	ストアフロントと同じオリジンであるため、ブラウザはこれをファーストパーティのリクエストとして扱います

「**アプリのプロキシURLを使用する」**をオンにして、プロキシアドレスを公開してください。これにより、ストアフロントとの統合がよりスムーズになります。また、同一オリジンであるため、多くの場合、CORSはまったく必要ありません。

電源を入れる前に知っておくべきこと：

• ストアフロントにはアクセスできる必要があります。開発用ストアなど、パスワードで保護されているストアの場合、プロキシURLはストアフロントのパスワードが入力されて初めて応答するため、ストア外部からの呼び出し元はそこでこのURLを利用することはできません。
• IP許可リストはプロキシURLには適用されません。これらのリクエストはShopifyのサーバーから当方に届くため、そのアドレスからは元のリクエスト元に関する情報は一切得られません。
• Shopifyは、プロキシURLを経由するすべてのリクエストに署名を行います。これを利用することで、ログイン済みのお客様のみがWebhookを呼び出せるようにしたり、直接URLを無効にしたり、Shopify Flowでお客様IDを取得したりすることができます。詳しくは、ストアフロントにログイン済みのお客様をご覧ください。

認証は、どちらのアドレスでも同じように機能します。重複配送防止、履歴、およびプランの制限についても同様です。

カスタムリクエスト本文を許可する

また、「詳細設定」内の**「カスタムリクエストボディを許可**」を有効にすると、厳格なボディ検証が無効になり、Webhookはマッピングしたフィールドだけでなく、どのような形式のJSONでも受け入れるようになります。送信元のペイロードが動的である場合や、それを制御できない場合にこの設定をご利用ください。マッピングされたフィールドは、従来通りShopify Flowに送信されます。詳細はペイロードのマッピングとShopify Flow変数をご参照ください。

関連情報

• 認証 - ブラウザが送信する必要があるもの。
• ペイロードのマッピングとShopify Flow変数 - Shopify Flow に送信されるフィールド。
• ストアフロントにログイン済みのお客様 - ログイン済みのお客様のみ。Shopify Flow内の顧客IDが指定されています。
• プランと利用方法 - ブラウザからの呼び出しは、1回ごとに制限数にカウントされます。