CORS Tutorial: A Guide to Cross-Origin Resource Sharing

Express stands out as a widely used and robust framework for crafting server-side code in Node.js. It streamlines the creation of APIs and web servers, making the process remarkably straightforward. However, when you're building both the backend and frontend of your application, you encounter a scenario where they need to communicate seamlessly. Here's the catch: the server, by default, isn't too keen on entertaining requests from anywhere other than itself.

What is CORS?

Imagine your backend is like a vigilant guardian, and it's not just going to open its doors for requests from any random place. This is where CORS, or Cross-Origin Resource Sharing, steps in. It's like the secret handshake that allows your frontend and backend to work together harmoniously. In simple terms, without enabling CORS, the server won't give the green light to requests coming from different web addresses. So, enabling CORS becomes a key move to let your server and frontend chat and collaborate effectively.

Setting up CORS in express

1. Installation

   npm install cors

2. Telling Express to use CORS

const express = require("express")
const cors = require("cors")

const app = express()

const options = {} // will initialize it later
app.use(cors(options))

To play nice with other web addresses, especially when you're doing things like searching a database, fetching data, or other cool operations, just by throwing in that 5th line app.use(cors(options)), you're opening the door for smooth interactions.

But here's the thing - if you're dealing with tasks like authenticating users using JWT (those fancy tokens) and sending them as cookies, you need to do a bit more. That's where the mysterious options comes into play. Let's unravel that together.

1. Setting up options:

    const options = {
        credentials: "include",
        origin: "the url of the frontend"
    }
   

Alright, so you've got this options thing, and it's like a secret code that tells your server how to handle requests, especially those involving cookies. If you're into sharing cookies (who isn't?), you need to set some values in this options object

• credentials: "include":

  This is like saying, "Hey, server, include the cookies with every request." It's essential when you're dealing with authentication and want those cookies tagging along.

• origin: "the url of the frontend":

  Think of this as the VIP pass. You're telling your server, "Only let in requests from this specific address." It's like a security measure. Usually, you don't have to bother setting this unless you're playing the cookie game.

And that's a wrap! Implementing CORS in Express doesn't have to be a head-scratching puzzle. With just a few lines of code - app.use(cors(options)), you've empowered your Express server to handle cross-origin requests gracefully. It's a simple but powerful move that opens up the doors for seamless communication between your backend and different web addresses.

So, if you found this guide helpful in navigating the CORS landscape in Express, consider giving it a heart 💖. And, follow for more engaging and informative articles on similar topics. Please join the DevHub community on Discord here for free full-stack development resources, jobs, internships, and insightful articles on web development!