سلام و خسته نباشید
استاد من ی مشکلی که دارم توی next زمانی که میخوام csrf رو برای درخواست های post بگیرم و بفرستم لاراول خطای 419 رو برمیگردونه
توی next 14 از axios اگر استفاده کنیم قابلیت cache رو از دست میدیم و پارامتری که خود next گفته داخل fetch استفاده کنیم توی axios قابل استفاده نیست ( یا من بلد نیستم حداقل ) این کار رو توی fetch چطوری هندل کنیم ؟
من توی fetch :
credential : include رو گذاشتم برای ارسال کوکی ها اما این کار انجام نمیشه حتی بصورت دستی هم کوکی X-XSRF-TOKEN رو هم میفرستم همرا درخواست و خطای 419 برطرف نمیشه
ممنون میشم این بخش رو راهنمایی کنید چکاری رو انجام بدم اوکی بشه و یا اگر راه حلی هستش بفرمایید
سلام وقت بخیر
دقیقا یکی همین مشکل شمارو قبلا داشتن
در بخش پرسش و پاسخ همین دوره بیینید به پاسخ رسیدن
تنها پرسشی که برای این دوره تبت شده network error که خوب مشکل من این نیستش چون من هردو دامین رو روی localhost گذاشتم برای لاراول 8000 و برای نکست روی پورت 3000 تنظیم شده درخواست ها از طریق axios اوکی هستش اما با متود fetch نه
مگه ازکدهای پیش فرض خودش استفاده نمیکنید؟
خودش کدش که درست هست و کار میکنه
const post = async (
url,
body,
baseSiteUrl = baseUrl.API,
headers = { Accept: 'application/json', 'Content-Type': 'application/json' },
) => {
const response = await fetch(`${baseSiteUrl}/${url}`, {
method: 'POST',
body: JSON.stringify(body),
headers: {
'X-Requested-With': 'XMLHttpRequest',
Accept: 'application/json',
withCredentials: true,
withXSRFToken: true,
'X-XSRF-TOKEN': getXsrfToken(),
'Content-Type': 'application/json',
},
credentials: 'include',
});
return response;
};
ببینید من یک متود post داخل نکست ساختم که به این شکل هستش و درخواست ها رو ارسال میکنه انواع هدر ها رو هم تست کردم همونطوری که ملاحضه میکنید
توی لاراول هم کد ها همون کد های پیشفرض هستن که توی دوره هم با خودتون ساختم پروژه رو تنها تغیر این بوده که یک سری فیلد به ثبت نام اضافه کردم همین
و یک متود دیگه برای درخواست csrf توی next ساختم که به این شکل :
const csrf = async () => {
await fetch(`${baseUrl.BACKEND}/sanctum/csrf-cookie`, {
method: 'GET',
cache: 'no-store',
headers: {
'X-Requested-With': 'XMLHttpRequest',
withCredentials: true,
withXSRFToken: true,
},
credentials: 'include',
});
};
و نحوه فراخوانی این دوتا هم این شکلی هستش :
const login = async () => {
await Fetch.csrf();
const res = await Fetch.post('login', form, baseUrl.BACKEND);
const result = await res.json();
if (res.status == 422) {
error('لطفا خطاهای فرم را بررسی کنید');
serverErrorHandler(result?.errors, setServerError, serverError);
}
if (res.status == 200) {
await getUserData();
}
};
توی نسخه های قبل next کلا از axios استفاده میشد مشکلی وجود نداشته
توی نسخه 14 به بعد برای ssr یا csr باید از متود fetch استفاده کرد درسته ؟
الان اگر از axios بخوایم استفاده کنیم چه اتفاقی ممکنه بیفته ؟ آیا راه اصولی و درستی هستش ؟ چون با توجه به خود داکیومنت next :
fetch('https://...', { cache: 'force-cache' })
پارامتر کش فقط توی fetch قابل استفاده هستش برای همین من میخوام از این روش پیش برم و به مشکل خوردم
شما از همون axios استفاده کنید راحت تر هست
من خودم از این استفاده میکنم