Multiple Anonymous Carts created from external Head front fetching custom Api

Scenario and Problem

Working in a custom headless architecture where a NextJs application hosted in Vercel consumes a custom API built in a Optimizely solution which works as a proxy between Optimizely Commerce Checkout actions (Get Cart, Add to Cart, etc) we faced and issue with guest users and duplicated carts.

The issue was that whenever an anonymous user call to api POST AddToCart , a new cart was created with a different anonymousId. But this was not happening from Postman, where same api method "Add to Cart" was always adding products to the same cart. 

So, from postman we had always the same anonymous cart but from external FE app, a new cart was created in each fetch to the same Api AddToCart.

Solution

The cause of the issue was that from the FETCH that called the API, we were not including the cookies as part of the http request. So, Optimizely was thinking that each request came from a different client, reponding with a different AnonymousId value. 

We realized about it inspecting postman "Cookies" tab that are part of each HTTP request and thinking that maybe our Frontend FETCH code was not including cookies. 

Finally, we found this post specifying that native FETCH API doesn't include cookies by default.

Adding the configuration to include it, everything started to work correctly, sending the same AnonymousId in each request. Anonymous carts duplication error was fixed with that.

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

In our case, we used the second resolution:

Hope it can be useful for someone else!