Cross-origin issues and deploy issue

Support
, , ,
1

Hello guys. i use vite reactjs and nodejs for an ecommance website with MERN Stack method, all working fine while texting in localhost and after deploying my server to render and my client side to netlify to test my project, i got into series of issues, firstly cross-origin problem
error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://bamstore-store.onrender.com/api/users/getLoginStatus’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

here is my cors setup:

/ CORS middleware
app.use(
cors({
origin: “https://bamstoreng.netlify.app”, // Explicitly specify the allowed origin
credentials: true, // Important for cookies, authorization headers with HTTPS
methods: [“GET”, “POST”, “PUT”, “DELETE”, “PATCH”, “OPTIONS”],
allowedHeaders: [
“Origin”,
“Content-Type”,
“Accept”,
“Authorization”,
“X-Request-With”,
],
})
);

i have tried different method even worked with chatGPT but still a deadend… i used cookies to store token for my header , getLoginStatus and LoginUser… with this issue a user can not login nor register .

testing my render API works perfectly but connecting with netlify gave me this issue,

problem 2. accessing product details hits 404 page not found which is working fine normally
https://bamstoreng.netlify.app/product/65da7795015087a65daa3250

product id assigned properly and id is being fetch…

please who can help me out and any area of my code you will like to review please ask so i can provide it. Thanks in advance

2

Incorrect

$ curl -Is https://bamstore-store.onrender.com/api/users/getLoginStatus | egrep '^access-control'
access-control-allow-origin: *
access-control-allow-credentials: true
3

? i don’t understand

4

You are using a wildcard for the Access-Control-Allow-Origin on the API as I’ve shown above. The error is telling you that when you use a wildcard for this header you cannot use Access-Control-Allow-Credentials.

Note: I also see you edited your original post to remove the text that I quoted.

1 Like
5

oh sorry, i thought it was a Bot that mark that as incorrect or spelling error, funny me… so do i need to adjust any of my code in my cors or the main issue is from render?

6

here is i full code spinet for my server

if (process.env.NODE_ENV !== “production”) {
require(“dotenv”).config();
}

const express = require(“express”);
const mongoose = require(“mongoose”);
const cors = require(“cors”);
const cookieParser = require(“cookie-parser”);
const userRoute = require(“./routes/userRoute”);
const productRoute = require(“./routes/productRoute”);
const orderRoute = require(“./routes/orderRoute”);
const categoryRoute = require(“./routes/categoryRoute”);
const brandRoute = require(“./routes/brandRoute”);
const errorHandler = require(“./middleware/errorMiddleware”);
const helmet = require(“helmet”);
const path = require(“path”);

const app = express();

//Middlewares
app.use(express.json());
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));

app.use((req, res, next) => {
if (
req.header(“x-forwarded-proto”) !== “https” &&
process.env.NODE_ENV === “production”
) {
res.redirect(https://${req.header("host")}${req.url});
} else {
next();
}
});

app.use((req, res, next) => {
console.log(“Request Headers:”, req.headers);
res.on(“finish”, () => {
console.log(“Response Headers:”, res.getHeaders());
});
next();
});

app.use(helmet());
app.use(
helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: [“‘self’”],
connectSrc: [“‘self’”, “https://bamstore-store.onrender.com”],
},
},
hsts: {
maxAge: 63072000, // 2 years
includeSubDomains: true,
preload: true,
},
})
);

// CORS middleware
app.use(
cors({
origin: “https://bamstoreng.netlify.app”, // Explicitly specify the allowed origin
credentials: true, // Important for cookies, authorization headers with HTTPS
methods: [“GET”, “POST”, “PUT”, “DELETE”, “PATCH”, “OPTIONS”],
allowedHeaders: [
“Origin”,
“Content-Type”,
“Accept”,
“Authorization”,
“X-Request-With”,
],
})
);

app.get(“/test-cors”, (req, res) => {
res.json({ message: “CORS is configured correctly” });
});

//routes
app.use(“/api/users”, userRoute);
app.use(“/api/products”, productRoute);
app.use(“/api/order”, orderRoute);
app.use(“/api/category”, categoryRoute);
app.use(“/api/brand”, brandRoute);

app.get(“*”, (req, res) => {
res.sendFile(path.join(__dirname, “build”, “index.html”));
});

// app.get(“/”, (req, res) => {
// res.send(“Home page…”);
// });

// error Middleware
app.use(errorHandler);

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
console.log(Server running in ${process.env.NODE_ENV} mode on port ${PORT});
});

mongoose
.set(“strictQuery”, false)
.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log(“MongoDB Connected”))
.catch((err) => console.error(“MongoDB connection error:”, err));

7

@bammytech1 The issue is how you have your application running on render configured, and while I know you originally presumed the issue was on Netlify’s side, and you’re just seeking help, this forum doesn’t really provide help debugging project specific code and especially not code running on other services.

That said, you’re working with express & the cors middleware, you could check the documentation:

You could also try the community @ render

1 Like
8

Something to do with the CORS headers in your API. But as @nathanmartin has said perfectly, this not something anyone here can directly assist you with.

9

Alright then thanks for this