App Web PixelsからのHTTP通信の可否について

[a_hirose]

App Web Pixelsを使ったShopifyアプリの開発をしております。

App Web PixelsのjavascriptからHTTP通信をすることは可能なのでしょうか？

目的としてはAppProxyを経由して自サーバにHTTPで情報を送信したいです。

register(async ({analytics}) => {
  analytics.subscribe('checkout_completed', async (event) => {
    const payload = {}; // 省略
    await fetch('/apps/app-proxy/example', {
       method: 'POST',
       body: JSON.stringify(payload),
       keepalive: true,
    });
  });
});

このようなjavascriptを実行すると、

Request are not allowed to the same origin: ***

というエラーが出て、明示的に同一オリジンへのHTTP通信をブロックしていることが伺えます。

ドキュメントではあたかもHTTP通信ができるような例が掲載されていますが、これは例が誤っているだけでしょうか？

[NIIGAKI_HYUGA]

初めまして、新垣と申します。

ShopifyのApp Proxyは基本的にプロキシを追加したストアのドメインからのリクエストしか受け付けないようです。

ShopifyのApp Proxyは主にShopifyストアフロントから外部サーバー（自社サーバーなど）へのリクエストを安全に送信するために使用されます。この機能は、Shopifyのストアフロント内で実行されるコード（JavaScriptなど）が、外部のサーバーやAPIにリクエストを送信する際に主に利用されます。しかし、外部アプリから自社サーバーにリクエストを送る際にApp Proxyを「経由する」というのは、少し誤解があるかもしれません。

ドキュメントの該当箇所はサードパーティーのアプリにHTTPリクストを送るもので、ShopifyのApp Proxyに送信している訳ではありません。

下記のように変更することで、HTTPリクエストを送信することは可能なのではないでしょうか。

register(async ({analytics}) => {
  analytics.subscribe('checkout_completed', async (event) => {
    const payload = {}; // 省略
    await fetch('ここを自社サーバーのURLに変更', {
       method: 'POST',
       body: JSON.stringify(payload),
       keepalive: true,
    });
  });
});

ご回答になっておりませんでしたらご指摘ください。