I created a review page for a steam service. Everything worked fine locally. after deploying the project with render.com, some troubles appeared.
all urls are https
react main-page code:
function Review() {
const [loggedIn, setLoggedIn] = useState(false);
const [inputReview, setInputReview] = useState(false);
const [reviews, setReviews] = useState([]);
const [errorSavingUserReview, setErrorSavingUserReview] = useState(false);
useEffect(() => {
axios
.get("serverURL", {
withCredentials: true,
})
.then((response) => {
const loggedInValue = response.data.photos[2].value ? true : false;
setLoggedIn(loggedInValue);
})
.catch((error) => {
console.error(error);
});
}, []);
const showInputReview = () => setInputReview(!inputReview);
const handleStarClick = (index) => {
setSelectedStars(index);
setHandleIfClickedStars(true);
setHoverIndex(index);
};
useEffect(() => {
axios
.get("/api/get-all-reviews")
.then((response) => {
setReviews(response.data);
})
.catch((error) => {
console.error("Error getting reviews:", error);
});
}, []);
const handleUpdateErrorSavingUserReview = (error) => {
setErrorSavingUserReview(error);
};
return (
SOME JSX
);
}
export default Review;
I just changed urls after using localhost
console:
XML parsing error: root element not found
Address: https://”serverURL”
TypeError: e.data.photos is undefined
Error getting reviews:
server code (only index.js):
const express = require("express");
const mongoose = require("mongoose");
const passport = require("passport");
const session = require("express-session");
const passportSteam = require("passport-steam");
const SteamStrategy = passportSteam.Strategy;
const cors = require("cors");
const Review = require("./models/review");
require("dotenv").config();
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
const URLMongoDB =
"mongodb+srv://"here i used personal info".mongodb.net/reviews";
mongoose
.connect(URLMongoDB)
.then(() => console.log("Connected to MongoDB"))
.catch((err) => console.log(`DB connection error: ${err}`));
app.use(function (req, res, next) {
res.header(
"Access-Control-Allow-Origin",
"clientURL""
);
res.header("Access-Control-Allow-Credentials", true);
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => {
done(null, user);
});
passport.use(
new SteamStrategy(
{
returnURL:
""serverURL"/api/auth/steam/return",
realm: "serverURL",
apiKey: "here i used personal info. to get apiKey i used "serverURL"",
},
function (identifier, profile, done) {
process.nextTick(function () {
profile.identifier = identifier;
return done(null, profile);
});
}
)
);
app.use(
session({
secret: "here i used personal info",
saveUninitialized: true,
resave: false,
cookie: {
maxAge: 3600000,
},
})
);
app.use(passport.initialize());
app.use(passport.session());
app.listen(port, () => {
console.log("Listening, port " + port);
});
app.use(express.json());
// Routes
app.get("/", (req, res) => {
res.send(req.user);
});
app.get(
"/api/auth/steam",
passport.authenticate("steam", { failureRedirect: "/" }),
function (req, res) {
res.redirect("clientURL");
}
);
app.get(
"/api/auth/steam/return",
passport.authenticate("steam", { failureRedirect: "/" }),
function (req, res) {
res.redirect("clientURL");
}
);
app.post("/api/save-input-review", (req, res) => {
const review = new Review(req.body);
review
.save()
.then(() => {
res.sendStatus(200);
})
.catch((error) => {
console.error("Error saving review:", error);
res.sendStatus(500);
});
});
app.put("/reviews/:id/report", async (req, res) => {
try {
const reviewId = req.params.id;
const { inputValueReport } = req.body;
const updatedReview = await Review.findByIdAndUpdate(
reviewId,
{ inputValueReport: inputValueReport },
{ new: true }
);
res.json(updatedReview);
} catch (error) {
console.error(error);
res.status(500).json({ error: "Server error" });
}
});
app.put("/reviews/:id/like", async (req, res) => {
try {
const reviewId = req.params.id;
const { liked } = req.body;
const incrementValue = liked ? 1 : -1;
const updatedReview = await Review.findByIdAndUpdate(
reviewId,
{ $inc: { like: incrementValue } },
{ new: true }
);
res.json(updatedReview);
} catch (error) {
console.error(error);
res.status(500).json({ error: "Server error" });
}
});
app.get("/api/get-all-reviews", (req, res) => {
Review.find()
.then((reviews) => {
res.json(reviews);
})
.catch((error) => {
console.error("Error getting reviews:", error);
res.sendStatus(500);
});
});
server log:
Listening, port 10000
Connected to MongoDB
im also using mongoDB, but before deploying i used local version of it. now atlas.0.0.0.0/0 in network access
i tried to rewrite cors logic, asked chatgpt, change hoster, but with no effect.