I'm working on a sort of my first saas to know how to build one, and I'm reaching the final steps. While everything was working well on chrome, I wanted to see how the responsive design looked like on my Iphone and I couldn't log in. I figured out that it was because of safari cookies policy and that a lot of people online recomanded to deploy your api and your frontend on the same domain name. Since it's the first time I do this, I don't know first if there is another solution or where can I deploy both with the same domain name if that's the only solution.

Here is my cookie setup on express :

app.use(session({
    key: process.env.COOKIE_KEY,
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
    proxy: true,
    cookie: {
        expires: 600000,
        httpOnly: true,
        secure: true,
        sameSite: 'none', 
    }
}));

and my cors setup :

const allowedOrigins = ['http://localhost:3000', ''];

app.use(
    cors({
        origin: function (origin, callback) {
        if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
            callback(null, true);
        } else {
            callback(new Error("Not allowed by CORS"));
        }
        },
        methods: ["GET", "POST", "PUT"],
        credentials: true,
        allowedHeaders: ["Content-Type", "Authorization", "x-api-key"],
    })
);

I tried changing my cookie setup, my CORS setup, deploying both on render but the frontend was showing not found every time I was redirected on a page