لا يمكن عمل PUT REQUEST الخطأ 405

Adham Mahfoud · 17 أبريل

السلام عليكم

نريد تعديل الصورة في موقعنا وهذا الكود الPHP

Route::put('/users/image/{email}',[ProfileController::class,'editUser']);

وهذا كود الفروتنت اند

     <form action="http://localhost:8000/api/users/image/${EMAIL}" method='put' className=' absolute left-[5999%]'>
                            <input id='image' type='file' name='image'  />
                                <input type="submit" id='sub' />
                            </form>

ولدينا كود نقوم من خلاله بعمل الريكويست عن طريق فانكشن لكنه يعطي نفس النتيجة:

  let handleImage = () => {
        fetch(`http://localhost:8000/api/users/image/adham111mahfoud@gmail.com`,{
            method: "PUT",
            headers: {
                "Content-Type": "application/json",


            },
            body: JSON.stringify({
                image: "image"
            }),
        }).then((res) => console.log(res))
    }

وال2 يعطيان NOT ALLOWED 405

كيف يمكن تصحيح هذا الخطأ؟

Khaled Osama3 · 17 أبريل

الخطأ 405 "Method Not Allowed" بيحصل لما البرنامج مش بيدعم الطريقة HTTP اللي انت بتستخدمها في الطلب.

بتحاول ترفع صورة عن طريق PUT request، وده فيه مشكلتين:

1- النماذج في HTML مش بتدعم PUT ولا DELETE، بتدعم بس GET و POST.

2- لما بترفع ملف (زي الصورة دي)، لازم تغير content type بتاع الطلب ل multipart/form-data مش application/json، علشان البرنامج يفهم انك بترفع ملف مش بيانات عادية.

عشان تصلح المشكلة دي، ممكن تعمل كده:

في البَاك اِند (PHP/Laravel):
تأكد ان مسار ال PUT صحيح وبيدعم رفع الصور، وان ProfileController بيتعامل مع الطلبات دي صح.

في الفرونت إند:
1- تقدر تستخدم النموذج بطريقة POST وتضيف input مخفي اسمه _method بقيمة put، كده Laravel هتفهم ان الطلب الحقيقي هو PUT:

<form action="http://localhost:8000/api/users/image/${EMAIL}" method="post" enctype="multipart/form-data">
    <input type='hidden' name='_method' value='put'> 
    <input id='image' type='file' name='image' />
    <input type="submit" id='sub' />
</form>

2- لو هتستخدم fetch، لازم تستخدم FormData عشان ترفع الملف صح:

let handleImage = () => {
    let formData = new FormData();
    formData.append("image", document.getElementById('image').files[0]);

    fetch(`http://localhost:8000/api/users/image/adham111mahfoud@gmail.com`, {
        method: "PUT", 
        body: formData
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}