Workflow WebhooksWorkflow Webhooks

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

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

CORSを有効にする

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

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

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

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

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

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

電源を入れる前に知っておくべきことが2つあります：

  • ストアは公開状態であり、パスワードで保護されていない必要があります。Shopifyは、ロックされたストアフロントに対するアプリプロキシのリクエストを転送しないため、開発用ストアではプロキシURLが応答しません。開発用ストアでは、この設定を無効にしておいてください。
  • IP許可リストはプロキシURLには適用されません。これらのリクエストはShopifyのサーバーから当方に届くため、そのアドレスからは元のリクエスト元に関する情報は一切得られません。

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

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

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

関連情報