Cross origin

.env.production

@@ -0,0 +1 @@
+VITE_API_URL=https://still-peak-52201.herokuapp.com/api

package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/cors": "^2.8.12",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
+    "cors": "^2.8.5",
     "csurf": "^1.11.0",
     "express": "^4.18.1",
     "helmet": "^6.0.0",

src/Auth.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from "react";
 import { UserInfo } from "remult";
+import { API_URL } from "./api-url";
 
 const Auth: React.FC<{ children: JSX.Element }> = ({ children }) => {
     const [signInUsername, setSignInUsername] = useState("");
     const [currentUser, setCurrentUser] = useState<UserInfo>();
 
     const signIn = async () => {
-        const result = await fetch('/api/signIn', {
+        const result = await fetch(API_URL + '/signIn', {
             method: "POST",
+            credentials: 'include',
             headers: {
                 'Content-Type': 'application/json'
             },
@@ -20,13 +22,16 @@ const Auth: React.FC<{ children: JSX.Element }> = ({ children }) => {
         else alert(await result.json());
     }
     const signOut = async () => {
-        await fetch('/api/signOut', {
-            method: "POST"
+        await fetch(API_URL + '/signOut', {
+            method: "POST",
+            credentials: 'include'
         });
         setCurrentUser(undefined);
     }
     useEffect(() => {
-        fetch('/api/currentUser').then(r => r.json())
+        fetch(API_URL + '/currentUser', {
+            credentials: 'include'
+        }).then(r => r.json())
             .then(async currentUserFromServer => {
                 setCurrentUser(currentUserFromServer)
             });

src/api-url.ts

@@ -0,0 +1,5 @@
+import { remult } from "remult";
+
+// See about environment variables https://vitejs.dev/guide/env-and-mode.html
+export const API_URL = import.meta.env['VITE_API_URL'] || 'http://127.0.0.1:3002/api';
+remult.apiClient.url = API_URL;

src/server/index.ts

@@ -7,10 +7,34 @@ import compression from 'compression';
 import sslRedirect from 'heroku-ssl-redirect';
 import path from 'path';
 import csurf from "csurf";
+import cors from 'cors';
 
 const app = express();
-app.use(session({
-    secret: process.env['TOKEN_SIGN_KEY'] || "my secret"
+
+// https://www.codeconcisely.com/posts/how-to-set-up-cors-and-cookie-session-in-express/
+if (process.env["NODE_ENV"] === "production") {
+    app.use(session({
+        secret: process.env['SESSION_SECRET'],
+        sameSite: 'none',
+        secure: true
+    }));
+    app.enable('trust proxy');
+}
+else {//dev
+    app.use(session({
+        secret: 'my secret',
+        sameSite: false,
+        secure: false,
+        httpOnly: false
+    }));
+}
+app.use(cors({
+    origin: [
+        'http://127.0.0.1:5173', // local vite dev server
+        'http://127.0.0.1:3002', //local node express server
+        'https://still-peak-52201.herokuapp.com' //production site for the app
+    ],
+    credentials: true
 }));
 app.use(sslRedirect());
 app.use(helmet({ contentSecurityPolicy: false }));

vite.config.ts

@@ -3,12 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    proxy: {
-      '/api': {
-        target: 'http://localhost:3002'
-      }
-    }
-  }
+  plugins: [react()]
 })