OVERVIEW
- I wrote a react app that interfaces with an Express API
- I implemented oauth2 in conjunction with express sessions for authorization
- Client-side I deployed to Netlify - https://keen-bhaskara-257c68.netlify.app/
- here is the repo: https://github.com/ThevinSilva/loghorizonServer
- server-side to Heroku - https://loghorizon-server.herokuapp.com/
- here is the repo: https://github.com/ThevinSilva/loghorizonClient
- current cors set up
//cloudinary
require("dotenv").config();
cloudinary.config({
cloud_name: "loghorizon",
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_SECRET,
});
require("./config/passport")(passport);
//MongoDB
connectDB();
//---------------------------------- SERVER ----------------------------------
const app = Express();
const httpServer = http.createServer(app);
const io = Socket(httpServer, {
cors: {
origin: process.env.CLIENT_SIDE_URL,
methods: ["GET", "POST"],
allowedHeaders: ["my-custom-header"],
credentials: true,
},
});
app.use(
cors({
origin: process.env.CLIENT_SIDE_URL, // allow to server to accept request from different origin
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
credentials: true, // allow session cookie from browser to pass through
})
);
//---------------------------------- MIDDLEWARE ----------------------------------
// increase bandwidth to allow for base64 strings
app.use(Express.json({ limit: "40mb", extended: true }));
app.use(Express.urlencoded({ limit: "40mb", extended: true }));
app.set("trust proxy", 1);
app.use(
Session({
name: "LHsession",
secret: process.env.COOKIE_SECRET,
resave: true,
store: new MongoStore({ mongooseConnection: mongoose.connection }),
cookie: {
sameSite: false,
maxAge: 8.64e7,
secure: false,
httpOnly: false,
},
})
);
// utility for monitoring requests
app.use(Morgan("dev"));
//---------------------------------- Pasport config ----------------------------------
app.use(passport.initialize());
app.use(passport.session());
PROBLEM
The project works flawlessly in my dev environment(tested on multiple computers). Throws the following error: has been blocked by CORS policy: no 'Access-Control-Allow-origin' ...
It's important to note that the actual authorization page with the accounts shows up except when I get redirected back to my web app session isn't stored.
WHAT I'VE TRIED
it goes without saying non of these worked
- I read that adding the line app.set("trust proxy")
app.set("trust proxy", 1);
app.use(
Session({
name: "LHsession",
secret: process.env.COOKIE_SECRET,
resave: true,
store: new MongoStore({ mongooseConnection: mongoose.connection }),
cookie: {
sameSite: false,
maxAge: 8.64e7,
secure: false,
httpOnly: false,
},
})
);
- In Axios I added withCredentials
const server = axios.create({
withCredentials: true,
baseURL: process.env.REACT_APP_SERVER + "/board",
});
- I read numerous threads this one seemed promising and might work but I want the client and server to be separate - express session not persisting after deploying to heroku and netlify
Disclaimer
- I'm a 17-year-old hobbyist who's probably way in over his head, please dumb things down my knowledge of networking non-existent. Give me material to read perhaps.
- the environment variables I checked were successfully entered
- The documentation is probably a little weird sorry
- There's numerous errors and warning in the final react build but I think that hardly matters here
