Как скопировать объект через JSON?

CORS и что происходит при ошибке

CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузера. Серверу нужно явно разрешить запросы с других доменов.

Как работает CORS

При запросе с одного домена на другой (cross-origin), браузер:

1. Отправляет preflight запрос (OPTIONS) с заголовками Origin и Access-Control-*
2. Сервер должен ответить с нужными CORS заголовками
3. Если заголовки не совпадают — браузер блокирует ответ

Что происходит при ошибке CORS

Сервер может вернуть ответ несколькими способами:

1. Сервер вообще не отвечает на preflight (OPTIONS)

Запрос браузера:
OPTIONS /api/data HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: POST

Ответ сервера: 
(ничего, timeout или 404)

Результат в браузере:
CORS error: No 'Access-Control-Allow-Origin' header

2. Сервер возвращает неправильные CORS заголовки

Запрос браузера:
POST /api/data HTTP/1.1
Origin: http://localhost:3000

Ответ сервера:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{ "data": "..." }

Результат в браузере:
CORS error: origin 'http://localhost:3000' is not allowed
(ответ заблокирован, данные недоступны)

3. Сервер возвращает 403 Forbidden

// Запрос браузера
fetch('http://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify({ foo: 'bar' })
})

// Ответ сервера
HTTP/1.1 403 Forbidden
Access-Control-Allow-Origin: *

{ "error": "Forbidden" }

// Результат в браузере
CORS error: Response has unsupported CORS headers

4. Сервер вообще не отправляет CORS заголовки

Запрос браузера:
GET /api/data HTTP/1.1
Origin: http://localhost:3000

Ответ сервера:
HTTP/1.1 200 OK
Content-Type: application/json

{ "data": "..." }

Результат в браузере:
CORS policy: No 'Access-Control-Allow-Origin' header
(даже успешный ответ 200 блокируется браузером)

Правильная настройка CORS

На сервере (Express.js):

const cors = require('cors')

// Простой способ
app.use(cors())

// Или с конфигурацией
app.use(cors({
  origin: 'http://localhost:3000',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}))

Необходимые CORS заголовки

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
Access-Control-Allow-Credentials: true

Как обнаружить CORS ошибку в браузере

fetch('http://api.example.com/data')
  .catch(error => {
    console.error('Error:', error.message)
    // "Failed to fetch" — может быть CORS ошибка
  })

// В консоли браузера:
// Access to XMLHttpRequest at 'http://api.example.com/data' 
// from origin 'http://localhost:3000' has been blocked by CORS policy:
// No 'Access-Control-Allow-Origin' header is present on the requested resource.

Способы решения CORS проблем

1. Попросить сервер добавить нужный origin

app.use(cors({
  origin: ['http://localhost:3000', 'https://myapp.com']
}))

2. Использовать CORS proxy (временный hack)

const url = 'https://cors-anywhere.herokuapp.com/http://api.example.com/data'
fetch(url).then(r => r.json())

3. Сделать запрос через свой backend

// Frontend запрашивает свой сервер
fetch('/api/proxy?url=http://external-api.com/data')

// Backend запрашивает внешний API
app.get('/api/proxy', async (req, res) => {
  const data = await fetch(req.query.url).then(r => r.json())
  res.json(data)
})

4. Использовать credentials

fetch('http://api.example.com/data', {
  credentials: 'include',  // Отправить cookies
  headers: {
    'Content-Type': 'application/json'
  }
})

// На сервере
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}))

Распространённые CORS ошибки

CORS — это защита браузера, а не серверная ошибка. Сервер может отправить любой ответ, но браузер его блокирует на уровне JavaScript API.