DEV Community: Pranit Karkera

Cross-Origin Resource Sharing(CORS). CORS middleware Setup.

Pranit Karkera — Thu, 30 Jan 2025 07:24:01 +0000

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. This is known as the Same-Origin Policy. Without CORS, a web page hosted on https://example.com cannot make an API request to https://api.anotherdomain.com.

CORS allows servers to specify who can access their resources and under what conditions. It does this by adding specific HTTP headers to the server's responses.

CORS in Your Example

In your code, you are using the cors middleware in an Express.js application to enable CORS. Here's a breakdown of how it works:

CORS Middleware Setup

const corsOptions = {
  origin: "*",
  credentials: true,
  optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

origin: "*": This allows requests from any domain. The is a wildcard that means "all origins are allowed." This is useful for public APIs but should be used cautiously in production, as it can expose your API to security risks.
credentials: true: This allows the server to accept credentials (e.g., cookies, authorization headers) from the client. If the client includes credentials in the request (e.g., with withCredentials: true in an XMLHttpRequest or Fetch API call), the server must respond with the Access-Control-Allow-Credentials: true header.
optionSuccessStatus: 200: This sets the HTTP status code for OPTIONS requests (preflight requests) to 200. By default, some browsers expect a 204 status code for preflight requests, but this setting ensures compatibility.

How CORS Works in Your Application

When a client (e.g., a browser) makes a request to your server, the following happens:

Preflight Request (if applicable):
- For certain types of requests (e.g., those with custom headers or non-standard HTTP methods), the browser sends an OPTIONS request to the server to check if the actual request is allowed.
- The server responds with CORS headers (e.g., Access-Control-Allow-Origin, Access-Control-Allow-Methods, etc.) to indicate whether the request is permitted.
Actual Request:
- If the preflight request is successful, the browser sends the actual request (e.g., GET, POST, etc.).
- The server processes the request and includes the appropriate CORS headers in the response.

CORS Headers in Responses

When the cors middleware is used, it automatically adds the following headers to responses:

Access-Control-Allow-Origin: *: Allows requests from any origin.
Access-Control-Allow-Credentials: true: Allows credentials to be included in requests.
Access-Control-Allow-Methods: Specifies which HTTP methods are allowed (e.g., GET, POST, etc.).
Access-Control-Allow-Headers: Specifies which headers can be used in the actual request.

Example Scenario

Suppose your Express server is running at http://localhost:3000, and a web application hosted at https://example.com tries to make a request to your API.

The browser sends a request to http://localhost:3000/api/products.

The server responds with the appropriate CORS headers:

Access-Control-Allow-Origin: *Access-Control-Allow-Credentials: true

The browser checks these headers and allows the response to be accessed by the web application at https://example.com.

Key Points to Remember

Security Considerations:
- Using origin: "*" is convenient but can expose your API to cross-site request forgery (CSRF) attacks. In production, it's better to specify trusted origins explicitly, e.g., origin: "https://example.com".
Credentials:
- If credentials: true is set, the Access-Control-Allow-Origin header cannot be . You must specify a specific origin.
Preflight Requests:
- Not all requests trigger a preflight request. Simple requests (e.g., GET or POST with standard headers) do not require a preflight.
Testing CORS:
- You can test CORS behavior using tools like Postman or by running a frontend application and inspecting network requests in the browser's developer tools.

Example of a More Secure CORS Configuration

If you want to restrict access to specific domains, you can modify the corsOptions like this:

const corsOptions = {
  origin: "https://example.com", // Allow only this domain
  credentials: true,
  optionSuccessStatus: 200,
};

This ensures that only requests from https://example.com are allowed, improving security.

By using the cors middleware in your Express application, you enable cross-origin requests while controlling access to your API resources.

More information about javascript array methods can be found in the React docs:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Leave comment if you have any questions or feedback.

Map(), Filter(), Reduce() javascript array method

Pranit Karkera — Thu, 30 Jan 2025 06:48:32 +0000

What Are These Methods?

map, filter, and reduce are methods that help you work with arrays in JavaScript. They are used to process and transform data in arrays without needing to write long for loops.

The `map()` Method

What does it do?

The map() method creates a new array by applying a function to every element in the original array.
It does not change the original array.

When to use it?

Use map() when you want to transform every element in an array (e.g., doubling numbers, converting strings to uppercase).

Example:

const numbers = [1, 2, 3, 4];

// Double each number in the array
const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6, 8]

How it works:

The map() method loops through each element in the numbers array.
For each element, it applies the function (num) => num * 2.
It collects the results into a new array (doubled).

The `filter()` Method

What does it do?

The filter() method creates a new array with only the elements that pass a certain condition.
It does not change the original array.

When to use it?

Use filter() when you want to select specific elements from an array (e.g., filtering even numbers, finding names that start with "A").

Example:

const numbers = [1, 2, 3, 4];

// Filter out only the even numbers
const evens = numbers.filter((num) => num % 2 === 0);

console.log(evens); // [2, 4]

How it works:

The filter() method loops through each element in the numbers array.
For each element, it checks the condition (num) => num % 2 === 0.
If the condition is true, it adds the element to the new array (evens).

The `reduce()` Method

What does it do?

The reduce() method combines all the elements of an array into a single value.
It does not change the original array.

When to use it?

Use reduce() when you want to aggregate data (e.g., summing numbers, finding the maximum value).

Example:

const numbers = [1, 2, 3, 4];

// Sum all the numbers in the array
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

How it works:

The reduce() method takes two arguments:
- A reducer function ((acc, num) => acc + num).
- An initial value (0 in this case).
It loops through each element in the numbers array.
For each element, it updates the acc (accumulator) with the result of the reducer function.
At the end, it returns the final value of acc (sum in this case).

Key Differences Between `map`, `filter`, and `reduce`

Method	Input	Output	Purpose
`map()`	Array	New array	Transform each element
`filter()`	Array	New array	Select elements that meet a condition
`reduce()`	Array	Single value	Combine elements into one value

Combining These Methods

You can chain these methods together to perform complex operations on arrays.

Example:

const numbers = [1, 2, 3, 4];

// Step 1: Double each number (map)
// Step 2: Filter out numbers greater than 5 (filter)
// Step 3: Sum the remaining numbers (reduce)
const result = numbers
  .map((num) => num * 2) // [2, 4, 6, 8]
  .filter((num) => num > 5) // [6, 8]
  .reduce((acc, num) => acc + num, 0); // 14

console.log(result); // 14

Practice Time!

Let’s practice with a small exercise:

Problem:

You have an array of products:

const products = [
  { name: "Apple", price: 1.5 },
  { name: "Banana", price: 0.5 },
  { name: "Orange", price: 2 },
  { name: "Mango", price: 3 },
];

Use map() to create a new array with only the names of the products.
Use filter() to find products with a price greater than 1.
Use reduce() to calculate the total price of all products.

Solution:

// 1. Map to get product names
const productNames = products.map((product) => product.name);
console.log(productNames); // ["Apple", "Banana", "Orange", "Mango"]

// 2. Filter to find products with price > 1
const expensiveProducts = products.filter((product) => product.price > 1);
console.log(expensiveProducts);
// [{ name: "Apple", price: 1.5 }, { name: "Orange", price: 2 }, { name: "Mango", price: 3 }]

// 3. Reduce to calculate total price
const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice); // 7

Summary

map(): Transform each element in an array.
filter(): Select elements that meet a condition.
reduce(): Combine elements into a single value.

More information about javascript array methods can be found in the React docs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Leave comment if you have any questions or feedback.

DEV Community: Pranit Karkera

Cross-Origin Resource Sharing(CORS). CORS middleware Setup.

What is CORS?

CORS in Your Example

CORS Middleware Setup

How CORS Works in Your Application

CORS Headers in Responses

Example Scenario

Key Points to Remember

Example of a More Secure CORS Configuration

Map(), Filter(), Reduce() javascript array method

What Are These Methods?

The map() Method

What does it do?

When to use it?

Example:

How it works:

The filter() Method

What does it do?

When to use it?

Example:

How it works:

The reduce() Method

What does it do?

When to use it?

Example:

How it works:

Key Differences Between map, filter, and reduce

Combining These Methods

Example:

Practice Time!

Problem:

Solution:

Summary

The `map()` Method

The `filter()` Method

The `reduce()` Method

Key Differences Between `map`, `filter`, and `reduce`