Global Middleware

[00:00:00]
>> Speaker 1: Let's just do some middleware then Let's get into that Let's go to our server Jay asked me to pull up my notes over here, so I know what I'm doing

[00:00:00]
OK, let's go to our server.js We're going to add our global middleware here It should already be installed, but I'll just check the packages to make sure

[00:00:00]
One middleware we're going to use is called CORS Anybody here ever had a CORS error before Yeah, you know what that is

[00:00:00]
You're the server engineer now, so you're about to implement CORS You're about to be that person that causes that error for other engineers

[00:00:00]
CORS stands for Cross-Origin Resource Sharing It only exists in browsers and basically protects users from having a script running on a website try to access another resource from a different origin

[00:00:00]
For example, if I'm on ESPN.com and there's a script trying to hit another URL, Chrome will block that if the server for that resource hasn't allowed access from that origin

[00:00:00]
Typically, the browser would send out an OPTIONS request, which is also called a preflight check The browser sends this to the server, saying, "Here's the origin trying to access this URL, here are the headers they're trying to use." The server can then respond with allowed headers and origins

[00:00:00]
Chrome will determine if the request is allowed based on the server's policy If Chrome determines you don't meet the policy, you'll get a CORS error in the console saying you can't use that resource

[00:00:00]
The only way around this is to be the one making the server and add the desired origin to the allow list Alternatively, you can make the API call from a non-browser environment like the terminal or Postman, as CORS checks only happen in browsers

[00:00:00]
This is a protection mechanism given that websites can run malicious scripts outside of your control In a terminal, if someone's writing malicious scripts, you have bigger problems

[00:00:00]
We'll use CORS to define our policy on who can access our API from browsers We'll also use Helmet, which is a collection of security best practices for servers

[00:00:00]
It sets appropriate headers to protect against common attacks Morgan is a request logger that will log every incoming request, which is super useful for debugging

[00:00:00]
Let's add these to our server We'll import CORS, Morgan, and Helmet These middleware libraries are over 10 years old and still widely used today

[00:00:00]
Because these are global middlewares, we'll register them before anything else runs We'll use app.use() with Helmet, CORS, Express.json(), Express.urlencoded(), and Morgan

[00:00:00]
For CORS, we'll enable it for localhost Express.json() ensures we can access request payloads as objects Express.urlencoded() helps handle URL-encoded query strings

[00:00:00]
For Morgan, we'll skip logging during testing Remember, server logs are in the terminal, not the browser console.