外部ヘッドフロントフェッチから作成された複数の匿名カート

シナリオと問題

Vercel でホストされている NextJs アプリケーションが、Optimizely Commerce Checkout アクション (カートの取得、カートに追加など) 間のプロキシとして機能する Optimizely ソリューションに組み込まれたカスタム API を使用するカスタム ヘッドレス アーキテクチャで作業することで、私たちが直面し、問題が発生しました。 ゲスト ユーザーと複製されたカート。

問題は、匿名ユーザーが API POST AddToCart を呼び出すたびに、異なる anonymousId で新しいカートが作成されることでした。しかし、これは Postman では起こりませんでした。Postman では、同じ API メソッド「カートに追加」が常に同じカートに商品を追加していました。

そのため、郵便配達員からは常に同じ匿名カートを使用していましたが、外部 FE アプリからは、同じ API AddToCart へのフェッチごとに新しいカートが作成されました。

解決

この問題の原因は、API を呼び出す FETCH で http リクエストの一部として Cookie が含まれていなかったことでした。そのため、Optimizely は、各リクエストが異なるクライアントから送信され、異なる AnonymousId 値で応答すると考えていました。

私たちは、各 HTTP リクエストの一部であるポストマンの「Cookie」タブを調べているときに、フロントエンドの FETCH コードに Cookie が含まれていないのではないかと考えました。

最後に、ネイティブ FETCH API にはデフォルトで Cookie が含まれていないことを指定するこの投稿を見つけました。

それを含めるために構成を追加すると、すべてが正しく動作し始め、各リクエストで同じ AnonymousId が送信されました。匿名カートの重複エラーはこれで修正されました。

https://stackoverflow.com/questions/34558264/fetch-api-with-cookie

私たちの場合は、2 番目の解決策を使用しました。

他の人の役に立つことを願っています!

2024 年 10 月 11 日