CORS ошибка при разработке: 5 способов решить навсегда

Введение

Вы запускаете свое приложение, открываете консоль браузера и видите красную ошибку:

Access to fetch at 'https://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.

Знакомо? Это одна из самых частых ошибок в веб-разработке. По статистике, с ней сталкивается каждый frontend разработчик в первые месяцы работы, и даже опытные разработчики регулярно натыкаются на проблемы с CORS.

В этой статье вы узнаете:

• ✅ Что такое CORS и почему он нужен
• ✅ Почему возникает эта ошибка
• ✅ 5 способов решить проблему (от простых до профессиональных)
• ✅ Когда какой способ использовать
• ✅ Как не создать дыру в безопасности

Что такое CORS

CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузера, который контролирует, какие веб-сайты могут отправлять запросы к вашему API.

Технические детали

CORS работает через HTTP заголовки. Когда браузер делает запрос к другому домену, он проверяет:

1. Origin — откуда идет запрос (http://localhost:3000)
2. Access-Control-Allow-Origin — кому разрешен доступ (приходит от сервера)

Если они не совпадают → ошибка CORS.

Что считается "другим доменом"

Запрос будет считаться cross-origin, если отличается любое из:

Важно: Даже localhost:3000 → localhost:8000 будет cross-origin!

Почему возникает ошибка

Главная причина: Браузер защищает пользователя

CORS не дает злоумышленникам:

• Читать ваши cookie с других сайтов
• Делать запросы от вашего имени
• Красть токены авторизации

Типичный сценарий ошибки:

1. Frontend на localhost:3000 (разработка)
2. API на api.example.com (или localhost:8000)
3. Разные origin → CORS блокирует запрос

Пример кода, который вызывает ошибку:

// Ваш React/Vue/Angular код
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('CORS Error:', error));

// ❌ Результат в консоли:
// Access to fetch... has been blocked by CORS policy

5 способов решения

Рассмотрим все способы от простых до production-ready. Для каждого — примеры кода, плюсы и минусы.

Способ 1: Настройка Backend (временное решение)

Идея: Настроить сервер, чтобы он разрешал запросы с вашего localhost.

Для Node.js (Express):

// backend/server.js
const express = require('express');
const cors = require('cors');

const app = express();

// ⚠️ Только для разработки!
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

// Или разрешить всем (очень небезопасно):
// app.use(cors());

app.get('/api/users', (req, res) => {
  res.json({ users: ['Alice', 'Bob'] });
});

app.listen(8000);

Для Python (Flask):

# backend/app.py
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# Только для разработки!
CORS(app, origins=['http://localhost:3000'])

@app.route('/api/users')
def get_users():
    return {'users': ['Alice', 'Bob']}

if __name__ == '__main__':
    app.run(port=8000)

Способ 2: Proxy в Webpack/Vite

Идея: Настроить dev-сервер так, чтобы он пересылал запросы к API. Браузер думает, что запрос идет к тому же origin.

Для Vite (Vue, React с Vite):

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

Использование:

// Вместо:
fetch('http://localhost:8000/users')

// Пишем:
fetch('/api/users')  // ✓ Proxy перенаправит на localhost:8000/users

Для Create React App:

// package.json
{
  "proxy": "http://localhost:8000"
}

Для Vue CLI:

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Способ 3: Browser Extensions (не рекомендуется)

Идея: Установить расширение, которое отключает CORS в браузере.

Популярные расширения:

• Allow CORS: Access-Control-Allow-Origin
• CORS Unblock
• Moesif Origin & CORS Changer

Способ 4: Mock API с правильными CORS

Идея: Использовать Mock API сервис, который уже настроен с правильными CORS заголовками.

Зачем это нужно?

Часто проблема не в том, что backend не настроен, а в том, что backend еще не готов. Вместо ожидания можно использовать Mock API.

Пример с LightBox API:

1. Создаем Mock API (2 минуты): регистрируемся на lightboxapi.ru, создаем endpoint GET /api/users
2. Настраиваем ответ в веб-интерфейсе
3. Используем в коде:

// React example
import { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // ✓ CORS уже настроен правильно!
    fetch('https://yourdomain.lightboxapi.ru/your-workspace/users')
      .then(res => res.json())
      .then(data => setUsers(data.users))
      .catch(err => console.error(err));
  }, []);

  return (
    

      {users.map(user => (
        
{user.name}
      ))}
    
  );
}

Преимущества Mock API:

Способ 5: Production решение

Идея: Правильная архитектура, которая работает в production без CORS проблем.

Архитектура 1: Same Origin (тот же домен)

Nginx конфигурация:

server {
    listen 80;
    server_name myapp.com;

    # Frontend (статика)
    location / {
        root /var/www/frontend/build;
        try_files $uri /index.html;
    }

    # Backend API (proxy)
    location /api/ {
        proxy_pass http://localhost:8000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Результат:

• Frontend: https://myapp.com
• API: https://myapp.com/api
• Один origin → нет CORS! ✓

Архитектура 2: Subdomain с CORS

Backend настройка (production):

// Node.js
app.use(cors({
  origin: [
    'https://myapp.com',
    'https://app.myapp.com'
  ],
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Когда использовать какой подход

Вопросы безопасности

app.use(cors({
  origin: '*',  // ❌ Разрешает ВСЕМ
  credentials: true
}));

app.use(cors({
  origin: ['https://myapp.com'],  // ✓ Только доверенные
  credentials: true
}));

FAQ

Postman → API: ✓ Работает (нет CORS)
Браузер → API: ✗ Блокировка (CORS защищает)

app.options('*', cors());  // Разрешить preflight
app.use(cors());

Заключение

Статья обновлена: 19 октября 2025
Автор: LightBox API Team