FROM CACHE - jp_header

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

a_hirose
Shopify Partner
1 0 0

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通信ができるような例が掲載されていますが、これは例が誤っているだけでしょうか?

 

 

1件の返信1

NIIGAKI_HYUGA
Shopify Partner
54 23 15

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

 

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,
    });
  });
});

 

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

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください