This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I’ve got one last excerpt from my new pocket guide and video course on Serverless with vanilla JS. We’ll be looking at HTTP methods: what they are, and when to use which one.
Let’s dig in!
What are HTTP methods?
HTTP methods are verbs that describe the type of request you’re making to an endpoint.
The five most common are GET
, POST
, PUT
, DELETE
, and OPTIONS
.
GET
- Retrieve data from an API endpoint.POST
- Submit data to an API endpoint. Usually causes something to happen on the server.PUT
- Replace the existing data for an item with something new. This method can often be used to create a new item if one doesn’t already exist.DELETE
- Delete the data associated with an item.OPTIONS
- Get a list of allowed HTTP methods.
In a Cloudflare Worker serverless function, the Access-Control-Allow-Methods
property on the headers
object defines which HTTP methods are allowed for a request.
// Define response headers
let headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*'
});
So far, we’ve been allowing a wide range of HTTP methods, but your API may not use all of those methods. We can restrict which HTTP methods are allowed, and conditionally respond differently to different methods.
Only allowing certain HTTP methods
To restrict your serverless API to specific HTTP methods, you can remove the methods that are not allowed from comma-separated list of values under Access-Control-Allow-Methods
.
For example, if we only wanted to support GET
and OPTIONS
, we would do this.
// Define response headers
let headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': '*'
});
If you attempted to make a POST
, PUT
, or DELETE
request to this API, for example, you would get back a CORS error.
Detecting which HTTP method was used to make the API request
Inside the handleRequest()
function, the request.method
property returns the type of HTTP method used to make the API request.
/**
* Respond to the request
* @param {Request} request
*/
async function handleRequest(request) {
// Define response headers
let headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
'Access-Control-Allow-Headers': '*'
});
// Get the request method
let method = request.method;
// ...
}
Since different HTTP methods imply different behaviors, you might run different serverless function tasks or provide different responses based on the request method.
The OPTIONS method
For example, in HTTP, the OPTIONS
method returns a list of allowed HTTP methods.
For many HTTP methods (like POST
), browsers will first make what’s called a pre-flight request to the API with the OPTIONS
method to make sure that the specified method is allowed. If you’re supporting more than just GET
requests, you should always provide a dedicated response for the OPTIONS
method to avoid pre-flight CORS errors.
To do that, we can check if the request.method
is equal to OPTIONS
.
If it is, we’ll return a new Response()
with null
for the body
, a status
of 200
, and our headers
object. Otherwise, we’ll return the full API response.
/**
* Respond to the request
* @param {Request} request
*/
async function handleRequest(request) {
// Define response headers
let headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': '*'
});
// Handle the OPTIONS method
if (request.method === 'OPTIONS') {
return new Response(null, {
status: 200,
headers: headers
});
}
// return a Response object
return new Response(JSON.stringify({
greeting: 'Hi, Universe!'
}), {
status: 200,
headers: headers
});
}
? A new session of the Vanilla JS Academy starts on October 4. Let's make 2021 the year you master JavaScript. Click here to join.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-09-23T14:30:00+00:00) What are HTTP methods and what do they do?. Retrieved from https://www.scien.cx/2021/09/23/what-are-http-methods-and-what-do-they-do/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.