3月 05, 2026

Storefront APIにより、クロスオリジンリソース共有が可能に

3月 05, 2026

Storefront APIによるクロスオリジンリソース共有の実現

これまでShopify Storefront APIを使用した際、異なるオリジンからのリクエストに対して、リソースの共有が難しいという技術的課題がありました。特に、APIクライアントがオンラインストア以外からカートイベントを起動する場合、CORS（Cross-Origin Resource Sharing）ポリシーに従ったオリジンリクエストに対して、ブラウザとのクッキー共有ができないため、コンバージョンメトリクスの計測が困難でした。

新たな技術的ソリューションの提案

Shopifyの最新アップデートでは、この課題を解決する新しい機能が追加されました。SSLプロビジョニングされたドメインからStorefront APIへのリクエストは、Admin Panelに登録されたドメインリストから返されるようになり、新たに以下の2つのヘッダーが追加されました。

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: ${origin_domain}

これにより、Storefront APIはブラウザとの間でリソースを安全に共有することが可能になり、オンラインストア以外のAPIクライアントから発生したカートイベントも、CORSポリシーに準拠したオリジンリクエストであれば、コンバージョンメトリクスに反映できるようになります。

実装手順とコード例

この新機能を利用するためには、まずAdmin PanelでSSLプロビジョニングされたドメインを登録します。その後、Storefront APIからのレスポンスに新たに追加されたヘッダーを確認し、それに基づいてリソースの共有を行います。

具体的なコード例は以下の通りです。


// SSLプロビジョニングドメインの登録
adminPanel.registerDomain('your-ssl-provisioned-domain.com');

// Storefront APIからのレスポンスヘッダーを確認
const response = await fetch('https://your-ssl-provisioned-domain.com/api-endpoint', {method: 'GET'});
console.log(response.headers.get('Access-Control-Allow-Credentials'));
console.log(response.headers.get('Access-Control-Allow-Origin'));

パフォーマンス・コスト分析

この新機能により、異なるオリジンからのリクエストに対してもリソースの共有が可能になり、それによってブラウザとの間でクッキーを共有できるようになります。これにより、オンラインストア以外のAPIクライアントからのカートイベントも計測できるようになり、より正確なコンバージョンメトリクスを得ることが可能になります。また、開発コストや運用コストにも大きな影響はありません。

実装時の注意点・ベストプラクティス

この新機能を実装する際には、CORSポリシーを遵守することが重要です。また、SSLプロビジョニングされたドメインをAdmin Panelに登録する際には、適切な設定を行うことが必要です。正確なヘッダー情報を取得するためには、リクエスト送信時に適切なメソッド（GET、POSTなど）を設定することも重要です。