Transcript
-
So we left off with everything working with our form, but with our request, we're still using post when we want to actually be using delete.
-
And the reason we're doing that is because HTML forms really only support post out of the HTTP methods that we're looking to use. And that's where HTTP method spoofing comes into play
-
and the DOSJS supports it. So it essentially allows us to spoof the underlying HTTP method that we want to use with our HTML form,
-
essentially allowing us to tell Adonis that although we're submitting a post request with our form,
-
we actually want to use a put, patch or delete HTTP method to match against this particular routes usage.
-
So for this, we'd be able to switch our router for our flush back to a delete method. So we can give that a save. And by default, AdonisJS starts with this off.
-
But if we dive into our app configuration and we scroll down a little bit, we should see underneath the HTTP config, a property called allow method spoofing.
-
By default, as I said, this is set to false, but we can switch this to true and now we can use it within our application. So to use it, we dive back into our homepage
-
where our form is and where we're generating out our route. What we want to do is add on an additional query string with an underscore method key,
-
setting the particular HTTP method that we want to use. At the end of the day, that would look something like slash Redis slash flush
-
question mark to enter in our query string, underscore method equals, and then the delete HTTP method that we want to use. With AdonisJS's route function,
-
the second argument is going to be for route parameters as we're using within our navigation and whenever we're using our movie show page. But the third argument is where we can set
-
configuration options, including query string information. We can provide that in as an object where the key is underscore method
-
and the value is then delete, just like so. So if we give this a save, jump back into our browser,
-
let's open up our inspect for our network panel real quick. So network panel right there to make sure that we have persist logs still on and it is. Let's hit our flush Redis DB button.
-
Okay, we saw everything go out. Let's scroll back up to our flush call. And you can see a query string with underscore method equals delete is now being sent out with our requests URL.
-
Everything else behaved the exact same as before. We can dive back into our terminal to ensure that everything worked correctly. And sure enough, we reached our flushing Redis DB console log,
-
ensuring that we actually entered the route handler for our Redis flush route handler. So with this HTTP method spoofing, we can now make full use of the HTTP verbs.
-
By default, forms will be post already, but we can additionally add in now put, patch and delete verbs on our base HTML forms.
-
Note that you still want the underlying method attribute on the form itself to be post because that will allow the HTML form to send up to our server as usual.
-
But now Adonis will use the underscore method whenever matching against routes to discern its intended HTTP verb to match against our route definitions.
HTTP Method Spoofing HTML Forms
We'll learn how we can enable HTTP Method Spoofing to allow AdonisJS to spoof intended HTTP Verbs for basic HTML form POST requests.
Join the Discussion 2 comments
-
Is this really the only clean way to tell Edge to pass this request with a parameter to specify the method? I mean: add an empty object, then an object containing a property
qs
which is itself an object containing the method name... It's a bit verbose... or is it intentional?In a shorter way :
action="{{ route('redis.flush') }}?_method=DELETE"
Copied!But it might be nicer for DX to have a helper to do something like :
action="{{ route('redis.flush').method('DELETE') }}"
Copied!What do you think about this ?
1-
Responding to n2zb
The second argument of the
route
method is where we'd add route parameters! So, if you need a route for:router.post('/movies/:id/activate', [MoviesController, 'activate']).as('movies.activate')
Copied!You could use the
route
method in EdgeJS to generate it like so:<a href="{{ route('movies.activate', { id: 1 }) }}"> Activate </a>
Copied!The third argument is then additional config options, which includes
qs
to add to the URLs query string. So, there are other options you can include beyondqs
to the third argument. Alternatives to this would include, as you've discovered, hard coding the query string outside the route method. You could also use the Route Builder, I believe you'd need to add this as a global to EdgeJS as I don't think it is included out of the box. However, the Route Builder would be AdonisJS solution to your second example!What I normally do, though, is wrap the
route
helper in my own service to make things super easy to read! For example, a usage of my form service would be:<form method="POST" action="{{ form.delete('redis.flush') }}"> </form>
Copied!You could also create EdgeJS components for this as well, which I've done in the past so you could do:
@form.delete({ action: route('redis.flush') }) @end
Copied!1
-