From 81172b71859ab331fc073f5175a3e28b12345b33 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:00:50 +0300 Subject: [PATCH 1/7] cross origin --- .env.production | 1 + package-lock.json | 46 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/Auth.tsx | 13 +++++++++---- src/api-url.ts | 7 +++++++ src/server/index.ts | 27 ++++++++++++++++++++++++-- vite.config.ts | 9 +-------- 7 files changed, 91 insertions(+), 14 deletions(-) create mode 100644 .env.production create mode 100644 src/api-url.ts diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..d7e8229 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_API_URL=https://still-peak-52201.herokuapp.com/ \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8a68a34..0c78eba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "react-vite-express-starter", "version": "0.0.0", "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", @@ -606,6 +608,11 @@ "@types/keygrip": "*" } }, + "node_modules/@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==" + }, "node_modules/@types/csurf": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@types/csurf/-/csurf-1.11.2.tgz", @@ -1326,6 +1333,18 @@ "node": ">= 0.8" } }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -2474,6 +2493,14 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", @@ -3937,6 +3964,11 @@ "@types/keygrip": "*" } }, + "@types/cors": { + "version": "2.8.12", + "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.12.tgz", + "integrity": "sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==" + }, "@types/csurf": { "version": "1.11.2", "resolved": "https://registry.npmjs.org/@types/csurf/-/csurf-1.11.2.tgz", @@ -4498,6 +4530,15 @@ "keygrip": "~1.1.0" } }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "create-require": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", @@ -5248,6 +5289,11 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" + }, "object-inspect": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", diff --git a/package.json b/package.json index c28fdf3..99e214a 100644 --- a/package.json +++ b/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", diff --git a/src/Auth.tsx b/src/Auth.tsx index 08e9f6d..f9de169 100644 --- a/src/Auth.tsx +++ b/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(); 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) }); diff --git a/src/api-url.ts b/src/api-url.ts new file mode 100644 index 0000000..145f105 --- /dev/null +++ b/src/api-url.ts @@ -0,0 +1,7 @@ +import { remult } from "remult"; + +// See about environment variables https://vitejs.dev/guide/env-and-mode.html +export const API_URL = import.meta.env['API_URL'] || 'http://127.0.0.1:3002/api'; +remult.apiClient.url = API_URL; +console.log({ API_URL }); +console.log(import.meta.env); \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index ac5f084..9eb266b 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -7,10 +7,33 @@ 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['TOKEN_SIGN_KEY'], + sameSite: 'none', + secure: true + })); +} +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 })); diff --git a/vite.config.ts b/vite.config.ts index c23d733..3f43fc4 100644 --- a/vite.config.ts +++ b/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()] }) \ No newline at end of file From 081d950b2cc9600a81f4fedd9d0ed39153532fba Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:03:28 +0300 Subject: [PATCH 2/7] fixed secret --- src/server/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/server/index.ts b/src/server/index.ts index 9eb266b..dcef894 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -13,7 +13,7 @@ const app = express(); // 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['TOKEN_SIGN_KEY'], + secret: process.env['SESSION_SECRET'], sameSite: 'none', secure: true })); From 42f243ecbb180ee6b32236dd2cf22dcde0147f01 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:06:47 +0300 Subject: [PATCH 3/7] added logging --- src/server/index.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/server/index.ts b/src/server/index.ts index dcef894..feaacb9 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -10,22 +10,25 @@ import csurf from "csurf"; import cors from 'cors'; const app = express(); + +console.log({ + env: process.env +}) // https://www.codeconcisely.com/posts/how-to-set-up-cors-and-cookie-session-in-express/ if (process.env["NODE_ENV"] === "production") { - app.use(session({ + app.use(myLog(session({ secret: process.env['SESSION_SECRET'], sameSite: 'none', secure: true - })); + }))); } else {//dev - app.use(session({ + app.use(session(myLog({ secret: 'my secret', sameSite: false, secure: false, httpOnly: false - })); - + }))); } app.use(cors({ origin: [ @@ -51,3 +54,8 @@ app.get('/*', function (_, res) { }); app.listen(process.env["PORT"] || 3002, () => console.log("Server started")); + +function myLog(a: T) { + console.log(a); + return a; +} \ No newline at end of file From a8c2789c4a3688180d3971f608b83e66092b041e Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:08:09 +0300 Subject: [PATCH 4/7] fixed vite apu url --- src/api-url.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api-url.ts b/src/api-url.ts index 145f105..1c60132 100644 --- a/src/api-url.ts +++ b/src/api-url.ts @@ -1,7 +1,7 @@ import { remult } from "remult"; // See about environment variables https://vitejs.dev/guide/env-and-mode.html -export const API_URL = import.meta.env['API_URL'] || 'http://127.0.0.1:3002/api'; +export const API_URL = import.meta.env['VITE_API_URL'] || 'http://127.0.0.1:3002/api'; remult.apiClient.url = API_URL; console.log({ API_URL }); console.log(import.meta.env); \ No newline at end of file From e6dca432ff8d7da84b453f59bc4df27169fdba27 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:09:33 +0300 Subject: [PATCH 5/7] another fix --- .env.production | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.production b/.env.production index d7e8229..1c7ea1f 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -VITE_API_URL=https://still-peak-52201.herokuapp.com/ \ No newline at end of file +VITE_API_URL=https://still-peak-52201.herokuapp.com/api \ No newline at end of file From 164e213fa87d3ff66727eedb5823ce3f53efc11e Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:11:06 +0300 Subject: [PATCH 6/7] Added trust proxy --- src/server/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/server/index.ts b/src/server/index.ts index feaacb9..eb05117 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -21,6 +21,7 @@ if (process.env["NODE_ENV"] === "production") { sameSite: 'none', secure: true }))); + app.enable('trust proxy'); } else {//dev app.use(session(myLog({ From d2e9dddc52f262a5a063f802fcefcff458b7a7e4 Mon Sep 17 00:00:00 2001 From: Noam Honig Date: Mon, 19 Sep 2022 13:24:48 +0300 Subject: [PATCH 7/7] removed console log --- src/api-url.ts | 4 +--- src/server/index.ts | 16 ++++------------ 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/api-url.ts b/src/api-url.ts index 1c60132..210b862 100644 --- a/src/api-url.ts +++ b/src/api-url.ts @@ -2,6 +2,4 @@ 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; -console.log({ API_URL }); -console.log(import.meta.env); \ No newline at end of file +remult.apiClient.url = API_URL; \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index eb05117..a330416 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -11,25 +11,22 @@ import cors from 'cors'; const app = express(); -console.log({ - env: process.env -}) // https://www.codeconcisely.com/posts/how-to-set-up-cors-and-cookie-session-in-express/ if (process.env["NODE_ENV"] === "production") { - app.use(myLog(session({ + app.use(session({ secret: process.env['SESSION_SECRET'], sameSite: 'none', secure: true - }))); + })); app.enable('trust proxy'); } else {//dev - app.use(session(myLog({ + app.use(session({ secret: 'my secret', sameSite: false, secure: false, httpOnly: false - }))); + })); } app.use(cors({ origin: [ @@ -55,8 +52,3 @@ app.get('/*', function (_, res) { }); app.listen(process.env["PORT"] || 3002, () => console.log("Server started")); - -function myLog(a: T) { - console.log(a); - return a; -} \ No newline at end of file