چطور میتونم پروژه ریکت رو به api متصل کنم
سلام خسته نباشید
چند روزی میشه که با مشکلی روبرو شدم و متاسفانه هنوز نتونستم حلش کنم کلی سایتای خارجی رو هم دیدم ولی هنوز نتونستم حلش کنم خیلی ممنون میشم اگه بتونید راهنمایی کنید.
من پروژه ای رو در حالت لوکال به پایان رسوندمش و برای مرحله قرار دادن رو سرور اقدام کردم
تمام مراحل رو به درستی انجام دادم بک اند به درستی کارشو انجام میده
ولی فرانت که با ریکت نوشته شده تو حالت لوکال درون فایل package.json آدرس api رو تو پراکسی قرار میدادم و از طریق axios و به سادگی درخواست هارو به بک اند میفرستاد
اما زمانی که فرانت با حالت بیلد بالا میارم دیگه نمیتونه به api درخواست رو بفرسته مثلا اگه آدرس رو به اینصورت قرار دادم
await axios.post("/user/login")درخواست به آدرسی که متعلق به فرانت هست فرستاده میشه
(به جای api.example.com/user/login به example.com/user/login میفرسته)
چندین روش رو تست کردم ولی از هیچکدوم جواب نگرفتم
اول: یک فایل کانفیگ ساختم و آدرس api رو اونجا قرار دادم و در جاهایی که نیاز داشتم ایمپورت کردم که در اینصورت درخواست رو به api میتونه بفرسته و سیستم لاگینی که دارم ارورها رو برمیگردونه
اما زمانی که لاگین به درستی انجام میشه باید هر کاربری که وارد میشه یک token بگیره اینجا تو این روش به مشکل برخوردم که توکن رو نمیتونه برای کاربر قرار بده و اروری که تو بک اند قرار داده بودم رو بر میگردونه: کاربر هنوز لاگین نشده , در صورتی که پیام لاگین موفق هم تو فرانت هم تو بک اند گرفتم
دوم اومدم از طریق کتابخانه env-cmd و طبق روش هایی که موجود بود پیش رفتم و آدرس api رو تو فایل .env قرار دادم در این روش زمانی که بصورت بیلد اجرا میشه فایل .env هم بدنبال بقیه کدها اجرا میشه و دسترسی رو به بک اند میده ولی زمانی که اجرا میشه مثه روش بالا عمل میکنه
کدهارو کلی بررسی کردم ولی هیچ ایرادی نتونستم پیدا کنم بنظر شما چطور میتونم این مشکلو حل کنم😓🤒
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
خیلی ممنون از شما دوست عزیز من این کارو هم انجام دادم ولی با این روش هم مشکلم حل نشد
ولی یک راهی رو پیدا کردم و بعد از چندین روز کلنجار رفتن بالاخره تونستم درستش کنم
اینجا قرار میدم امیدوارم این روش برای بقیه مفید باشه
من متوجه شدم که وقتی پروژه ریکتی رو با بیلد ران میکنیم دیگه از پروکسی نمیتونه آدرس بک اند رو بگیره و اگر هم آدرس بک اند رو تو فایل کانفیگی قرار بدیم و به صورت دستی برای هر کدوم از فایل ها تغییر بدیم بازم با اروری روبرو میشیم که مرورگر نمیتونه کوکی ها رو بگیره و اگر تو پروژه از توکن داریم استفاده میکنیم باز مشکل ساز میشه و درخواست رو نمیتونه بک اند تشخیص بده من چند روش رو امتحانش کردم
یک روشی که برای اکثرا جواب میداد این بود که تو فایل اصلی بک اند (app.js یا server.js) به این صورت فولدر بیلد رو فراخوانی میکردیم
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
}این روش تا حدودی جواب میداد ولی بازم با مشکلاتی روبرو میشد
مشکل من اینجا بود که تو بک اند cors فرانت رو نمیتونست تشخیص بده و به همین دلیل درخواست ها رو نمیتونست بک اند دریافت کنه
روشی که پیش رفتم،
اول تو فایل (app.js یا server.js) از کد پایین استفاده کردم
const cors = require("cors");
const corsOptions = {
origin: "http://localhost:3000", //آدرس فرانت
credentials: true,
optionSuccessStatus: 200,
};
app.use(cors(corsOptions));و بعد تو فرانت فایلی که آدرس بک اند رو قرار میدادم به این صورت تغییر دادم
import axios from "axios";
const instance = axios.create({
baseURL: "http://localhost:5000", //آدرس بک اند
headers: {
ContentType: "application/json",
timeout: 1000,
},
withCredentials: true,
});
export default instance;
فکر می کنم ایراد اینه که برنامه ریکتی فقط در لوکال با proxy کار می کنه.
بهتر بود از ابتدا از پروکسی استفاده نمی کردید.
در یک فایلی اکسیوس تون رو کانفیگ کنید و براش baseurl بنویسید.
کانفیگش هم به این شکله که axiosintsance رو ایمپورت می کنید و در ابجکتی که بهش میدید baseurl رو تعیین می کنید و export کنید.
حالا در همه ی فایل هاتون به جای این که axios رو ایمپورت کنید این axiosintsance که این جا ساختید رو ایمپورت می کنید و از این استفاده می کنید.این طوری کار می کنه.
فکر می کنم از proxy در لوکال میشه استفاده کرد.این کاری که بهتون گفتم رو انجام بدید قطعا کار می کنه.
خیلی ممنون از شما دوست عزیز من این کارو هم انجام دادم ولی با این روش هم مشکلم حل نشد
ولی یک راهی رو پیدا کردم و بعد از چندین روز کلنجار رفتن بالاخره تونستم درستش کنم
اینجا قرار میدم امیدوارم این روش برای بقیه مفید باشه
من متوجه شدم که وقتی پروژه ریکتی رو با بیلد ران میکنیم دیگه از پروکسی نمیتونه آدرس بک اند رو بگیره و اگر هم آدرس بک اند رو تو فایل کانفیگی قرار بدیم و به صورت دستی برای هر کدوم از فایل ها تغییر بدیم بازم با اروری روبرو میشیم که مرورگر نمیتونه کوکی ها رو بگیره و اگر تو پروژه از توکن داریم استفاده میکنیم باز مشکل ساز میشه و درخواست رو نمیتونه بک اند تشخیص بده من چند روش رو امتحانش کردم
یک روشی که برای اکثرا جواب میداد این بود که تو فایل اصلی بک اند (app.js یا server.js) به این صورت فولدر بیلد رو فراخوانی میکردیم
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "client", "build", "index.html"));
});
}این روش تا حدودی جواب میداد ولی بازم با مشکلاتی روبرو میشد
مشکل من اینجا بود که تو بک اند cors فرانت رو نمیتونست تشخیص بده و به همین دلیل درخواست ها رو نمیتونست بک اند دریافت کنه
روشی که پیش رفتم،
اول تو فایل (app.js یا server.js) از کد پایین استفاده کردم
const cors = require("cors");
const corsOptions = {
origin: "http://localhost:3000", //آدرس فرانت
credentials: true,
optionSuccessStatus: 200,
};
app.use(cors(corsOptions));و بعد تو فرانت فایلی که آدرس بک اند رو قرار میدادم به این صورت تغییر دادم
import axios from "axios";
const instance = axios.create({
baseURL: "http://localhost:5000", //آدرس بک اند
headers: {
ContentType: "application/json",
timeout: 1000,
},
withCredentials: true,
});
export default instance;