---
id: 6a3b86e948d6d1555ddbfee3
title: What Is Same-Origin Policy and How Does It Work with CORS?
challengeType: 19
dashedName: what-is-same-origin-policy-and-how-does-it-work-with-cors
---

# --description--

The Same-Origin Policy is a built-in safety measure in your web browsers that stops one website from reading private data from another website. This rule protects your personal accounts from hackers.

An origin has three specific parts: the web protocol, the domain name, and the port number.

For example, in the address `https://example.com:443`, the protocol is HTTPS, the domain name is `example.com`, and the port number is `443`.

Browsers often hide the port number if it is the standard one. HTTPS defaults to port 443, and HTTP defaults to port 80. Even if hidden, the browser still checks it. Two websites have the same origin only when all three of these parts match exactly.

Under this strict rule, a browser blocks a website from prying on a different website. Imagine you open your online bank account in one browser tab and you open a malicious website in a second tab. The same-origin policy blocks the malicious website from stealing your banking info.

However, modern websites often need to share data across different origins. For example, a frontend webpage might need to pull data from a separate backend server. The same-origin rules in browsers block these safe requests, so developers needed a way to share data securely. This is where CORS comes in.

CORS is a system that lets servers open access through browser rules. It uses special headers to grant data access to trusted sites.

Here's what happens when your browser asks another site for data:

* It includes an `Origin` header which names the website making the request
* The receiving server then checks this name
* If the server trusts the website, it replies with a special permission header which tells the browser that the website is allowed to read the incoming data.

If the server does not send this permission, the browser blocks the data instantly. The frontend website then gets an error message instead of the private files.

In Node.js applications using Express, CORS is implemented with the `cors` package:

```javascript
const express = require('express');
const cors = require('cors');
const app = express();

// this enables CORS for all origins and all routes for development
app.use(cors());
```

In production, you might have to pass a configuration object to restrict access to a specific domain:

```javascript
const corsOptions = {
  origin: ['https://yourapp.com', 'https://admin.yourapp.com'],
  credentials: true
};

app.use(cors(corsOptions));
```

If you're using raw Node.js, you would have to handle it manually by setting the CORS response headers yourself on every request:

```javascript
res.setHeader('Access-Control-Allow-Origin', 'https://example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
```

# --questions--

## --text--

What role does CORS play in modern web development regarding the Same-Origin Policy?

## --answers--

It disables all browser security rules for faster data transfer.

### --feedback--

Think about how browsers decide whether to allow requests between different websites.

---

It forces all websites to use HTTPS for secure communication.

### --feedback--

Think about how browsers decide whether to allow requests between different websites.

---

It allows servers to grant cross-origin access through special headers.

---

It encrypts all data sent between frontend and backend servers.

### --feedback--

Think about how browsers decide whether to allow requests between different websites.

## --video-solution--

3

## --text--

What three specific parts make up a web origin under the Same-Origin Policy?

## --answers--

The web protocol, the domain name, and the port number.

---

The browser version, the operating system, and the device type.

### --feedback--

Focus on what uniquely identifies where a web request comes from.

---

The user agent, the IP address, and the session token.

### --feedback--

Focus on what uniquely identifies where a web request comes from.

---

The HTML version, the CSS framework, and the JavaScript engine.

### --feedback--

Focus on what uniquely identifies where a web request comes from.

## --video-solution--

1

## --text--

When configuring CORS in a production Node.js and Express application, what configuration option restricts access to specific domains?

## --answers--

Use `app.use(cors())` without any arguments for default settings.

### --feedback--

Think about which configuration option lets you specify exactly which websites are allowed to access your server.

---

Set the `origin` property to an array of trusted URLs in a configuration object.

---

Manually set `Access-Control-Allow-Origin` headers on every response.

### --feedback--

Think about which configuration option lets you specify exactly which websites are allowed to access your server.

---

Disable CORS entirely and rely solely on server-side validation.

### --feedback--

Think about which configuration option lets you specify exactly which websites are allowed to access your server.

## --video-solution--

2
