Cookies Blocked in Cross-Origin Requests Between Netlify Frontend(Reactjs) and Railway Backend (Node ts)

Question

I am experiencing an issue with cookies being blocked when using my deployed application. The backend is deployed on Railway and the frontend on Netlify. Everything works perfectly in the local environment, but in production:

1. The cookie is not being set in the browser. The browser displays the following message:

   This attempt to set a cookie via the Set-Cookie header is blocked due to user preference.

2. Subsequent API requests do not include the cookie.

Here's an outline of my setup:

1. Backend (Express):

app.use(cors({
  origin: process.env.FRONTEND_URL || 'http://localhost:5173',
  credentials: true,
}));

res.cookie('token', `Bearer ${token}`, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  maxAge: 3600000,
  sameSite: 'none',
});

2. Frontend (React with Redux Toolkit Query):

const baseQuery = fetchBaseQuery({
    baseUrl: import.meta.env.VITE_BASE_URL,
    credentials: "include",
});

Environment Variables:

FRONTEND_URL: https://my-frontend.netlify.app
VITE_BASE_URL: https://my-backend.up.railway.app

Notes:

1. Login works, and the token is created, but it is not sent with credentials in subsequent API requests. I’m getting res.status(401).json({ message: "Access denied, Unauthorized user" }); for API requests even though the token exists.
2. The token is removed on page reload.
3. I’ve tested both in Chrome and Safari, and I see the same behavior.
4. In Microsoft Edge, the issue still appears with warnings like: "Microsoft Edge is moving towards a new experience that allows users to choose to browse without third-party cookies."

My questions:

1. What could be causing the browser to block cookies? 2.How can I ensure cookies are properly set and included in cross-origin requests in production?