HubertVanD's avatar

405 method not allowed with Axios

I'm following the laracast on building a forum. Am currently in episode 32. I am using Laravel 7.

When I do everything as explained, and edit a reply, and then push the "update" button, I get the wrong message form the Chrome network inspector: "405 method not allowed".

Any suggestion what I am doing wrong?

Hubert

0 likes
7 replies
tykus's avatar

Are you sending the update request to the correct URL (method, baseURL, segments and scheme)?

HubertVanD's avatar

Thnx for your quick reply. The relevant information (I think):

In Reply.vue:

export default { props: ['attributes'], data() { return { editing: false, body: this.attributes.body }; }, methods: { update() { axios.patch('/replies/' + this.attributes.id, { body: this.body }); this.editing = false; flash('Updated!'); } } }

In web.php:

Route::patch('/replies/{reply}', 'RepliesController@update');

In RepliesController:

public function update(Reply $reply)
{
    $this->authorize('update', $reply);
    $reply->update(['body' => request('body')]);
}

HUbert

tykus's avatar

Everything looks okay; can you check the Network tab to see what request(s) are being made?

MaverickChan's avatar

i can be 100% sure that you have a get route of reply/{reply} change the patch route to anything else this happens in vue SPA all the time , wildcard match will confuse the route file

HubertVanD's avatar

General: Request URL: http://localhost/replies/260 Request Method: PATCH Status Code: 405 Method Not Allowed Remote Address: [::1]:80 Referrer Policy: no-referrer-when-downgrade

Response: HTTP/1.1 405 Method Not Allowed Date: Tue, 25 Aug 2020 18:24:59 GMT Server: Apache/2.4.38 (Win32) OpenSSL/1.1.1a PHP/7.3.2 Vary: accept-language,accept-charset Accept-Ranges: bytes Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 Content-Language: en

Request: PATCH /replies/260 HTTP/1.1 Host: localhost Connection: keep-alive Content-Length: 31 Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, / X-XSRF-TOKEN: eyJpdiI6InVvYjVnK2FUYXBsUEg5cnZZcUV5MFE9PSIsInZhbHVlIjoiM2pUM1I0RGVhbisyZkpOZDhFdURWN0pnWHNIcGxFUlBrVEVmekVzMVYyQld6V0JxZExXTVZOQ1JWdzdTOTZPVm1PRHgvUWNHS0k2NXR6YWVOWGNmaFlrb2phaTAwYjByOTdHdjR2SEdDbmVuK2ErK1FNSXgxemx1TUcvdGxTcWQiLCJtYWMiOiIxNDMzMGQ3NTliZTI3ZGQxYTE1ZTFkZTZjYTQ0NWYwYjEzZjdkNzZiNTQ1ZmVlODY4YjBlNTM3ZjM5ODRjNDNlIn0= X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36 Content-Type: application/json;charset=UTF-8 Origin: http://localhost Sec-Fetch-Site: same-origin Sec-Fetch-Mode: cors Sec-Fetch-Dest: empty Referer: http://localhost/forum/public/threads/eveniet/68 Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7,de-DE;q=0.6,de;q=0.5 Cookie: _ga=GA1.1.396230672.1518958878; hikashop_cart_id=4499; hikashop_cart_session_id=ipi7c560kkfcm5qbvu6nj54690; XSRF-TOKEN=eyJpdiI6InVvYjVnK2FUYXBsUEg5cnZZcUV5MFE9PSIsInZhbHVlIjoiM2pUM1I0RGVhbisyZkpOZDhFdURWN0pnWHNIcGxFUlBrVEVmekVzMVYyQld6V0JxZExXTVZOQ1JWdzdTOTZPVm1PRHgvUWNHS0k2NXR6YWVOWGNmaFlrb2phaTAwYjByOTdHdjR2SEdDbmVuK2ErK1FNSXgxemx1TUcvdGxTcWQiLCJtYWMiOiIxNDMzMGQ3NTliZTI3ZGQxYTE1ZTFkZTZjYTQ0NWYwYjEzZjdkNzZiNTQ1ZmVlODY4YjBlNTM3ZjM5ODRjNDNlIn0%3D; forum_session=eyJpdiI6InpHNlFTa2pES1kzRU8zVEYzWFRMRUE9PSIsInZhbHVlIjoiOERnMW5RdENRcEZ0T213MGI0ZmltNk5OYlBoTWljcmMweEptZ01ndm5ycExPM1VnUkNRRnRBNWp0M1ZwSlFjaWhGNXcvNUtpU3E2bTR1MytDUFNXNlc1K0RKSUJDMFV1VW5zY2xrOUJrUXBVU1hiMGFqa291SzdqR1MvajVyd04iLCJtYWMiOiJiZDk5YTMyOTgyNTg1MTU3YzQ3MTJjZjU4YjUxMzVlMWE0Y2U2ZGUyYTlkYjMyNDM1ZTdjMjZhOTY2YmFhY2NlIn0%3D {body: "ouyiouiooiuouyoyuouo"} body: "ouyiouiooiuouyoyuouo"

HubertVanD's avatar

I found the problem and a workaround:

When a make a request from a form, I always have to use {{url(....)}} to get the url right. E.g. '/threads' should be changed to '{{url("/hreads')}}'.

When I (manually) replace the url in the axios.patch from '/replies/260' into 'http://localhost/public/replies/260' then I get a 200, as should be.

Can I use the url-function in the vue, sothat I always get ther right url in my request?

Hubert

1 like
lara_crass's avatar
Level 15

Thank you for sharing! We do exactly the same thing with the href="{{ url($thread->path()) }}". This solved my problem with the axios.patch in episode 32 build a forum.

Please or to participate in this conversation.