API working in local, but 405 in production

Published 2 months ago by elliotk

Hello All,

I have been working through the forum series on here, and I have implemented the Vue delete and update on the forum reply section. In valet, it's working fine, but on my "production server" i get 405.

Please feel free to try it yourself....

http://www.fastfrag.co.uk

I get the following in the console.

app.js:717 Uncaught (in promise) Error: Request failed with status code 405 at createError (app.js:717) at settle (app.js:1270) at XMLHttpRequest.handleLoad (app.js:557)

Anyone come across this?

Best Answer (As Selected By elliotk)
tim_jespers

So i did some more digging and i think i've found the problem! With valet everything is working, if you're using the latest version of Valet this uses Nginx under the hood.

On your production server you seem te be running Apache, now here comes the problem:

In order to understand PUT/PATCH/DELETE requests Apache needs the 'webdav' module enabled. My guess is that this isn't the case, apache is simply transforming our PATCH/DELETE requests to POST requests for the same endpoint.

POST /replies/{reply} isn't a valid route and therefore we are getting the MethodNotAllowedException (which reveals us that we should use either PATCH or DELETE for this route).

TLDR: enable Apache's webdav module and we should be good to go!

Webdav docs

tim_jespers

First of all! ALWAYS ALWAYS ALWAYS remove laravel debugbar from a production environment.. it took me 2 seconds to timetravel to your last login action and copy the credentials to log in with your user.. (for security reasons i cleared the debugbar request cache for now :) )

As for your problem, i can't really find out whats wrong? Whats is the exact step that gives you this 405? I can update, delete and create replies? I also created and deleted a thread successfully.. Can you give us some more details about your error and how we can recreate it?

elliotk

It's a good point, I wouldn't have it on normally, I just set debugging on to try and get some more details on what the issue is.

The UI might remove them / edit them, but if you refresh the page, you should see the changes don't apply and it reverts back to what it was before. That's the issue.

In chrome console I see the error throwing, hopefully you can see that too?

I'm not really sure how to debug further though.

tim_jespers

To be honest it's fairly simple once i understood what was wrong. Open up your chrome debug console and select the tab "network". Do a delete / edit and the request will pop-up there to be inspected and actually it's as clear as day!

Clicking delete on a thread reply makes a DELETE request to fastfrag.co.uk/replies/{id} but gets a 405 in return (method not allowed) same goes for the edit.

You can actually see the laravel response whenever you click that request.

The problem lies in your routes file, or your javascript is connected to the wrong endpoint in your API.

Double check if your routes for /replies/{id} are setup correctly for PATCH & DELETE methods. You should have enough info to work with now :)

elliotk

Thanks Tim, appreciate your help.

So, looking in my routes, i think it looks good. And as I said in my original post, it does work fine using valet on my local machine.

Route::delete('/replies/{reply}', [email protected]'); Route::patch('/replies/{reply}', [email protected]');

How would I check what endpoint my Javascript is connected to?

In my Reply.vue file, I am calling destroy as follows

destroy () {
                axios.delete('/replies/' + this.attributes.id);

                $(this.$el).fadeOut(300, () => {
                    flash('Reply has been updated!');
                });
            }

and for update

update () {
                axios.patch('/replies/' + this.attributes.id, {
                    body: this.body
                });

                this.editing = false;
                flash('Reply has been updated!');
            },
tim_jespers

So i did some more digging and i think i've found the problem! With valet everything is working, if you're using the latest version of Valet this uses Nginx under the hood.

On your production server you seem te be running Apache, now here comes the problem:

In order to understand PUT/PATCH/DELETE requests Apache needs the 'webdav' module enabled. My guess is that this isn't the case, apache is simply transforming our PATCH/DELETE requests to POST requests for the same endpoint.

POST /replies/{reply} isn't a valid route and therefore we are getting the MethodNotAllowedException (which reveals us that we should use either PATCH or DELETE for this route).

TLDR: enable Apache's webdav module and we should be good to go!

Webdav docs

elliotk

I wasn't really keen on installing the module, I see there are a lot of security concerns around that module. Instead, I have installed nginx.

Just got that up and running, hoping for no errors, but unfortunately, it's a new error now.

app.js:655 PATCH http://fastfrag.co.uk/replies/2 net::ERR_EMPTY_RESPONSE
app.js:717 Uncaught (in promise) Error: Network Error
    at createError (app.js:717)
    at XMLHttpRequest.handleError (app.js:567)
elliotk

All sorted.

Had to edit: /etc/nginx/webapps.hostname.conf

I've added PATCH and DELETE and it now works as expected.

if ($request_method !~ ^(GET|HEAD|POST|PATCH|DELETE)$ ) {
                return 444;
        }

Thanks for all your help.

Sign In or create a forum account to participate in this discussion.