error 404 when refresh page in server

هذه المشكلة تظهر في جميع الفيرموركس التى تعمل single page application  مثل react أوangular 
وتظهر بعد عملية بناء الموقع ثم رفعه على أى استضافة سواء مجانية مثل netlify أو vercal تظهر عند عمل اعادة تحميل للصفحة غير أول صفحة يفتح عليها الموقع أو وضع url صفحة أخري بسبب
أنه في SPA تتم إدارة التوجيه من جانب العميل، وقد لا يكون الخادم على علم بهذه المسارات من جانب العميل. يؤدي هذا التناقض إلى قيام الخادم بإرجاع خطأ "لم يتم العثور على الصفحة" للوصول المباشر إلى المسار، مما يتسبب في إحباط المستخدمين والارتباك للمطورين.
لحل المشكلة فى netlify مثلا  
نحتاج الى عمل ملف netlify.toml ثم بداخله نضع هذا الكود 
 

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

ونضع هذا الملف بجانب ملف الindex.html للموقع بعد عملية البناء builld

للمزيد اقرأ هذ المقال https://medium.com/@emmanuelomemgboji/react-handling-404-errors-on-netlify-deployments-a-step-by-step-guide-with-react-vite-and-8ce618e07b0a
 

بتاريخ On 28‏/1‏/2024 at 21:52 قال Mustafa Mahmoud7:

هذه المشكلة تظهر في جميع الفيرموركس التى تعمل single page application  مثل react أوangular 
وتظهر بعد عملية بناء الموقع ثم رفعه على أى استضافة سواء مجانية مثل netlify أو vercal تظهر عند عمل اعادة تحميل للصفحة غير أول صفحة يفتح عليها الموقع أو وضع url صفحة أخري بسبب
أنه في SPA تتم إدارة التوجيه من جانب العميل، وقد لا يكون الخادم على علم بهذه المسارات من جانب العميل. يؤدي هذا التناقض إلى قيام الخادم بإرجاع خطأ "لم يتم العثور على الصفحة" للوصول المباشر إلى المسار، مما يتسبب في إحباط المستخدمين والارتباك للمطورين.
لحل المشكلة فى netlify مثلا  
نحتاج الى عمل ملف netlify.toml ثم بداخله نضع هذا الكود 
 

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

ونضع هذا الملف بجانب ملف الindex.html للموقع بعد عملية البناء builld

للمزيد اقرأ هذ المقال https://medium.com/@emmanuelomemgboji/react-handling-404-errors-on-netlify-deployments-a-step-by-step-guide-with-react-vite-and-8ce618e07b0a
 

جربت ازود الملف ده منفعش معايا لان انا مش رافعه علي netlify ف وصلت لحل في تعديل ال .htaccess و اول لما عدلت ال الملف ده و مسحت ملف netlify اللي زودته الموقع مبقاش يقرا الداتا بيز خالص و حاولت ارجع كل حاجه زي الاول بردو مشتغلش و كتبت شويه اوامر في ال terminal عشان الكاتش فايل و مفيش فايده بردو تقدر تفيدني ايه سبب المشكله دي مع العلم ان مفيش ايرور بيظهر في ال console و علي بوست مان بيظهر ده بس You need to enable JavaScript to run this app.

طب ممكن تجرب على api بالبوست مان وتتأكد إن السيرفر شغال مظبوط 

لأن المشكلة اللى كانت مذكورة كان ليها علاقة بالreact. 

بتاريخ 20 ساعة قال Mustafa Mahmoud7:

طب ممكن تجرب على api بالبوست مان وتتأكد إن السيرفر شغال مظبوط 

لأن المشكلة اللى كانت مذكورة كان ليها علاقة بالreact. 

الحل بتاع netlify مش شغال عندي لان انا شغال علي namecheap و بتحكم في الملفات من Cpanel و المشروع laravel و react.js ف في حل وصلتله ان في ملف ال .htaccess اعدل شويه حجات بس لما بعدل مش بيقرا ال database و بيجيب صفحه load و التعديلات اللي عملتها هي اللي معمولها comment حاليا 

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    
    # RewriteBase /
    # RewriteRule ^index\.html$ - [L]
    # RewriteCond %{REQUEST_FILENAME} !-l
    # RewriteRule . /index.html [L]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]
    

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
    
</IfModule>

أولا من المفترض جزء الapi على domain 
وجزء الفرونت على domain أخر
نبدأ نجرب بالبوست هل الapi يعمل ومظبوط ويتصل بالداتا بيز لو كان يعمل اذن 
نضع هذه الأكواد فى .htaccess في domain الفرونت بالتأكيد
من المفترض أن يعمل بدون اى مشاكل

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>