next.js ve express.js deploy sorunu
merhaba arkadaşlar next.js ve express.js ile bir proje geliştirmeyi dusunuyorum auth kısmını yaptım localhosta duzgun calışıyor ama bunu deploy ettiğimde giriş yaparken istek atıyor cookieyi kaydediyor ama yönlendirme yapmıyor ve sayfayı yenilediğimde cookiie siliniyor yardımcı olur musunuz baya araştırma yaptım bulamadım linki de verim isterseniz deneyin https://socializee-app.vercel.app/
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (9)
backend .env
CLIENT_HOST="https://socializee-app.vercel.app"
middleware
import { NextResponse } from "next/server";
export const middleware = async (req) => {
const { nextUrl, cookies } = req;
const token = cookies.get("token");
const pathname = nextUrl.pathname;
const paths = ["/auth/login", "/auth/register"];
if (!paths.includes(pathname) && !token?.value) {
return NextResponse.redirect(new URL("/auth/login", req.url));
}
if (paths.includes(pathname) && token?.value) {
return NextResponse.redirect(new URL("/dashboard", req.url));
}
return NextResponse.next();
};
export const config = {
matcher: [
"/",
"/dashboard",
"/dashboard/:path*",
"/auth/register",
"/auth/login",
],
};
login sayfası
const handleSubmit = async (e) => {
e.preventDefault();
try {
setLoading(true);
const res = await FetchLogin(data);
if (res.status === 200) {
toast.success(res.data.message);
router.push("/dashboard");
}
} catch (error) {
toast.error(error.response.data.message ?? error.message);
} finally {
setLoading(false);
}
};
login sayfası
const handleSubmit = async (e) => {
e.preventDefault();
try {
setLoading(true);
const res = await FetchLogin(data);
if (res.status === 200) {
toast.success(res.data.message);
router.push("/dashboard");
}
} catch (error) {
toast.error(error.response.data.message ?? error.message);
} finally {
setLoading(false);
}
};
Evet, bu kez kayıt olabildim.
Aslında oturum başarılı şekilde açılıyor. Dashboard ekranına gitmek istiyor. Ama sonra oturumu doğrulayamayıp tekrar login ekranına redirect ediyor gibi görünüyor.
Bu sorun sanıyorum bir middleware'dan kaynaklanıyordur. Bir yandan da localhost'ta düzgün çalıştığını söylüyorsun.
Production ortamında domain farklı olabilir (localhost yerine vercel.app), bu yüzden corsOptions kısmında doğru domain'i ayarladığından emin olmak gerek.
process.env.CLIENT_HOST
değerinin ne olduğuna bakmak gerekebilir. Bunu login ekranına yazdırıp görmeyi deneyebilirsin. Bu değer boş da olabilir, production ortamındaki domain'inden farklı da olabilir. Kontrol etmek gerek.
Bu domain farkı yüzünden cors sorunları yaşayıp dashboard sayfanda cookie'yi okuyamıyor olabilirsin.
const corsOptions = {
origin: process.env.CLIENT_HOST || 'https://socializee-app.vercel.app',
credentials: true,
};
Pek de Next.js tecrübem olmadığından böyle adım adım deneye yanıla ilerleyeceğiz artık :)
Aslında production ortamındaki tüm process.env
değerlerini görebilsek güzel olurdu.
kodlarım bu sekilde @ebykdrms ve ben kayıt olmayı denedim oldu bir hata vermedi
const express = require("express");
const https = require("http");
require("dotenv").config();
const dbConnect = require("./libs/dbConnect.js");
const cors = require("cors");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const root = require("./routers/root.js");
const errorHandler = require("./middleware/error.js");
dbConnect();
const app = express();
const server = https.createServer(app);
const corsOptions = {
origin: process.env.CLIENT_HOST,
credentials: true,
};
app.use(cors(corsOptions));
app.use(bodyParser.json({ extended: true }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use("/api", root);
app.use(errorHandler);
const port = process.env.PORT || 3000;
server.listen(port, () => {
console.log(`listening to port ${port}`);
});
Aşağıdaki bilgilerle kayıt olmayı denedim.
{
"name": "Proto",
"surname": "Test",
"username": "prototurkebykdrms",
"email": "[email protected]",
"password": "123456"
}
Console'da şu hatayı aldım:
Access to XMLHttpRequest at 'https://socializee-backend.vercel.app/api/auth/register' from origin 'https://socializee-app.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Yani CORS hatası alıyorsun. Bu da isteği atan subdomain socializee-app
iken istek atılan subdomain socializee-backend
olduğu için oluyor. Localhost'ta CORS'a düşmüyor olabilirsin.
Ben bu aşamada takıldığım için cookie ile ilgili durumu gözlemleyemedim.
Bu sorunu çözmek için -backend kodunu bilemiyorum ama- kabaca aşağıdaki düzenlemeyi yapabilirsin:
const express = require('express');
const cors = require('cors');
const app = express();
// Aşağıdaki origin'den gelen isteklere izin veriyoruz:
app.use(cors({origin: 'https://socializee-app.vercel.app'}));
// ...diğer kodlar ve middleware'lar...
app.listen(80, () => {
console.log('Sunucu çalışıyor...');
});