fetch('https://example.com')
    .then((r) => r.text())
    .then(console.log)

https://example.com:443/page?id=1
└─┬─┘   └────┬─────┘ └┬┘
Протокол  Домен    Порт

Origin = https://example.com:443

// Запит на інший домен
fetch('https://api.github.com/users/octocat')
    .then((response) => response.json())
    .then((data) => console.log('User:', data.name))
    .catch((error) => console.error('CORS Error:', error))

GET /users/octocat HTTP/1.1
Host: api.github.com
Origin: https://mysite.com

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: application/json

{"login": "octocat", "name": "The Octocat"}

// Unsafe: метод PUT + custom header
fetch('https://api.example.com/users/123', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'X-API-Key': 'secret-key-123',
    },
    body: JSON.stringify({ name: 'Updated Name' }),
})

OPTIONS /users/123 HTTP/1.1
Host: api.example.com
Origin: https://mysite.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, X-API-Key

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, X-API-Key
Access-Control-Max-Age: 86400

PUT /users/123 HTTP/1.1
Host: api.example.com
Origin: https://mysite.com
Content-Type: application/json
X-API-Key: secret-key-123

{"name": "Updated Name"}

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mysite.com
Content-Type: application/json

{"id": 123, "name": "Updated Name"}

fetch('https://api.example.com/data').then((response) => {
    console.log(response.headers.get('Content-Type')) // ✅ Можна
    console.log(response.headers.get('X-Custom-Header')) // ❌ null (заблоковано)
})

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Expose-Headers: X-Custom-Header, X-Request-ID
X-Custom-Header: some-value
X-Request-ID: abc123

// ❌ Cookies НЕ будуть відправлені
fetch('https://api.example.com/profile')

// ✅ Cookies будуть відправлені
fetch('https://api.example.com/profile', {
    credentials: 'include',
})

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Credentials: true

// Frontend на https://myapp.com
async function getUserProfile() {
    try {
        const response = await fetch('https://api.mybackend.com/profile', {
            method: 'GET',
            credentials: 'include', // Відправити cookies
            headers: {
                Accept: 'application/json',
            },
        })

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`)
        }

        const profile = await response.json()
        console.log('Profile:', profile)
    } catch (error) {
        console.error('Failed to load profile:', error)
    }
}

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Credentials: true
Content-Type: application/json
Set-Cookie: session=abc123; SameSite=None; Secure

{"username": "john_doe", "email": "john@example.com"}

const express = require('express')
const app = express()

// Middleware для CORS
app.use((req, res, next) => {
    // Дозволяємо конкретний origin
    const allowedOrigins = ['https://myapp.com', 'https://staging.myapp.com', 'http://localhost:3000']

    const origin = req.headers.origin
    if (allowedOrigins.includes(origin)) {
        res.setHeader('Access-Control-Allow-Origin', origin)
    }

    // Дозволяємо credentials
    res.setHeader('Access-Control-Allow-Credentials', 'true')

    // Для preflight requests
    if (req.method === 'OPTIONS') {
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH')
        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-API-Key')
        res.setHeader('Access-Control-Max-Age', '86400') // 24 години
        return res.status(200).end()
    }

    // Дозволяємо читання custom headers
    res.setHeader('Access-Control-Expose-Headers', 'X-Total-Count, X-Request-ID')

    next()
})

// API endpoint
app.get('/api/users', (req, res) => {
    res.json([
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
    ])
})

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000')
})

const express = require('express')
const cors = require('cors')
const app = express()

// Простий варіант: дозволити всім
app.use(cors())

// Або з налаштуваннями:
app.use(
    cors({
        origin: ['https://myapp.com', 'http://localhost:3000'],
        credentials: true,
        exposedHeaders: ['X-Total-Count'],
        maxAge: 86400,
    }),
)

app.get('/api/data', (req, res) => {
    res.json({ message: 'CORS працює!' })
})

app.listen(3000)

{
    "proxy": "http://localhost:3001"
}

export default {
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
            },
        },
    },
}