Set-Cookie Response Header not setting cross site cookie on Heroku

Question

Locally, my cookies are set fine, but on Heroku with a cross-site call, they are not set in Chrome or Safari, the two browsers I've tried so far. I can only think that it is either because of the cross-site call or because of Heroku's proxy setup.

My Set-Cookie header looks like this: CookieName=cookieValue; Max-Age=864; Domain=.myPurchasedDomain.net; Path=/; Expires=Tue, 21 Dec 2021 22:43:28 GMT; HttpOnly; Secure; SameSite=None CookieName=cookieValue; Max-Age=864; Domain=.myPurchasedDomain.net; Path=/; Expires=Tue, 21 Dec 2021 22:43:28 GMT; HttpOnly; Secure; SameSite=None

I have set my BE server to trust proxies, and both my FE and BE should only be available via https. I do not have any (visible) CORS issues. I am setting withCredentials: true in my Express BE and credentials: true in my FE axios options. I'm using next.js on my FE in case that might impact anything.

I don't know how to determine why my cookie is not being set. Any ideas of what I should try next or what might be causing the problem?

Edit: My FE axios call looks like this:

axios
    .post(
      "herokuUrl/login",
      {
        /* no body */
      },
      {
        headers: {
          Authorization: jwtToken, // Variable from elsewhere
        },
        withCredentials: true,
      }
    )

Answer 1

I found the answer:

My FE React app was calling a BE Express server at a different domain. Browsers block setting cookies from different domains. To fix, put both behind the same domain.