Level 102
Why are you appending ?_method=PUT?
Why not just set it as method: 'put' ?
Dec 30, 2021
8
Level 3
How can I solve 405 error that only occurs on server, not locally
My app runs fine locally. I can create and add cards with pictures.
Now I try to deploy the app ( first time I deploy a complete self made application...). Probably I made a basic mistake. Just cannot figure out what it is...
Trying to update a card, server generates a 405 error message : The server returned a "405 Method Not Allowed".
Request URL: http://sub.site.nl/api/cards/7?_method=PUT
Request Method: POST
Status Code: 405 Method Not Allowed
Remote Address: 185.224.89.43:80
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: *
allow: GET, HEAD, PUT, DELETE
Cache-Control: no-cache, private
Connection: keep-alive
Content-Type: text/html; charset=UTF-8
date: Thu, 30 Dec 2021 13:04:51 GMT
Server: nginx/1.14.0 (Ubuntu)
Transfer-Encoding: chunked
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 540
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary62CtE2tIzeHJ1iNk
Cookie: XSRF-TOKEN=eyJpd...
Host: sub.site.nl
Origin: http://sub.site.nl
Referer: http://sub.site.nl/aanmelden
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Mobile Safari/537.36
My routes were:
Route::apiResource('/cards', 'App\Http\Controllers\CardController');
changed them into, without success...
Route::get('/cards', 'App\Http\Controllers\CardController@index');
Route::post('/cards', 'App\Http\Controllers\CardController@store');
Route::get('/cards/{id}', 'App\Http\Controllers\CardController@show');
Route::put('/cards/{id}', 'App\Http\Controllers\CardController@update');
Route::delete('/cards/{id}', 'App\Http\Controllers\CardController@destroy');
This is the vue component method calling the api:
editCard(){
const formData = new FormData();
formData.append('title',this.card.title);
formData.append('description',this.card.description);
formData.append('imagefile',this.selectedFile);
formData.append('speler_id', this.currentSpeler.speler.id);
formData.append('game_id', this.currentGame.id);
fetch(`api/cards/${this.card.id}?_method=PUT`, {
method: 'post',
body:formData,
})
//.then(res => res.formData())
.then(res => console.log(res))
.then(data => {
this.card.title='';
this.card.description='';
this.url='';
this.$refs.fileUpload.value=null;
this.showSpelerCards();
})
.catch(err => console.log(err));
},
On localhost with Xampp ( windows) everything works fine, on the VPS it fails. On server I get 405 error: Server is nginx on ubuntu.
Can any one see what might be the problem?
Level 3
just using PUT does not work, figured that out before... tried it with axio.put a second ago, without succes..., already on local host that failed..
The problem now is that is works locally, but not on the server..
Level 102
@spook1 well it's a good thing that it fails on local. That means you can fix it. Try again with the correct implementation and report back what it says on your computer
Level 3
Thanks for the feedback Sinnbeck. I adjusted the request and got it working, but ONLY when I use the POST method, for the update:
Route::post('/cards/{id}', 'App\Http\Controllers\CardController@update');
This is not a good way to define my routes I would say, but I see no other way to make it working...
editCard(){
formData.append('title',this.card.title);
formData.append('description',this.card.description);
formData.append('imagefile',this.selectedFile);
formData.append('speler_id', this.currentSpeler.speler.id);
formData.append('game_id', this.currentGame.id);
axios.post(`api/cards/${this.card.id}`,
formData,
)
.then(data => {
this.card.title='';
this.card.description='';
this.url='';
this.$refs.fileUpload.value=null;
this.showSpelerCards();
})
.catch(err => console.log(err));
Using:
axios.put(`api/cards/${this.card.id}`,
formData,
)
results in error:
Request URL: http://localhost:8000/api/cards/4
Request Method: PUT
Status Code: 405 Method Not Allowed
The _method=PUT append to the fetch command, ( or a similar addition to the axios command does not work:
axios.post(`api/cards/${this.card.id}`,
formData, {'_method': 'PUT'}
)
These generate a 405 error.
The reason I was appending _method:PUT is the following
from a website: https://serversideup.net/post-put-patch-requests-with-vuejs-and-axios/
I learned that:
*With Laravel PHP specifically, this needs to be added when you send data as a FormData object. Even though you will be wanting to send a PUT or PATCH request, you must send the request as POST but with the _method set to PUT or PATCH Laravel will handle it correctly. *
Level 3
Just figured out how to set method, Put to the formData:
formData.append('_method', 'PUT');
axios.post(`api/cards/${this.card.id}`,
formData,
)
leaves the only question: W
Why does this not work...
fetch(`api/cards/${this.card.id}?_method=PUT`, {
method: 'post',
body:formData,
Now I have to change all the fetch commands into axios...
Level 102
@spook1 I have no clue why that does not work. I personally just use the proper method and have never had a problem. I have never had to append anything unless when using blade
Level 1
Hi, I find myself facing the same "Method Not Allowed" issue. Do you know how I can resolve it, please?
Level 102
@zeineb1999 Please make a new thread instead of using this one. :)
Please or to participate in this conversation.