cors.md

Cors Cheatsheet 🤘

На главную

Cors - это посредник (промежуточное программный слой, middleware) для Express-приложений, предназначенный для настройки HTTP-заголовков, связанных с CORS.

Установка

yarn add cors
# или
npm i cors

Примеры использования

// включаем `CORS` для всех запросов
const express = require('express')
const cors = require('cors')

const app = express()
app.use(cors())

app.get('/users/:id', (_, res) => {
  res.json({ msg: 'CORS включен для всех запросов!' })
})

const PORT = process.env.PORT || 3000
app.listen(PORT, () => {
  console.log(`CORS-сервер запущен на порту ${PORT}`)
})

// включаем `CORS` для одного маршрута
app.get('/users/:id', cors(), (_, res) => {
  res.json({ msg: 'CORS включен только для этого маршрута!' })
})

// настраиваем CORS
const corsOptions = {
  origin: 'https://example.com',
  optionSuccessStatus: 200, // для старых браузеров и SmartTV
}

app.get('/users/:id', cors(corsOptions), (_, res) => {
  res.json({ msg: 'CORS включен только для example.com' })
})

Пример динамического включения CORS:

const whitelist = ['https://exmaple.com', 'https://another.org']
const corsOptions = {
  origin: (origin, cb) => {
    if (whitelist.indexOf(origin) > -1) {
      cb(null, true)
    } else {
      cb(new Error('Запрещено CORS'))
    }
  },
}

app.get('/users/:id', cors(corsOptions), (_, res) => {
  res.json({ msg: 'CORS включен только для доменов из белого списка' })
})

Для того, чтобы не блокировать запросы от сервера к серверу или REST-инструменты, в функцию проверки источника следует добавить !origin:

const corsOptions = {
  origin: (origin, cb) => {
    if (whitelist.indexOf(origin) > -1 || !origin) {
      cb(null, true)
    } else {
      cb(new Error('Запрещено CORS'))
    }
  },
}

Включение CORS для предварительных запросов

Некоторые запросы считаются сложными и требуют отправки предварительных запросов OPTIONS. Примерами сложных запросов могут быть запросы, отправляемые методами, отличными от GET/HEAD/POST (например, DELETE), или запросы, содержащие кастомные заголовки. Для включения CORS для сложных запросов следует использовать дополнительный обработчик OPTIONS:

app.options('/users/:id', cors())
app.delete('/users/:id', cors(), (_, res) => {
  res.json({ msg: 'CORS включен!' })
})

Включить CORS для всех сложных запросов можно так:

app.options('*', cors())

Настройки

• origin - настраивает заголовок Access-Control-Allow-Origin. Возможные значения:
  • boolean - false отключает CORS, true включает для источника запроса, определенного с помощью req.header('Origin')
  • string - включает CORS для определенного источника
  • regexp - включает CORS для источников, совпадающих с регулярным выражением
  • array - включает CORSдля источников, указанных в массиве. Каждый источник может быть строкой или регуляркой
  • function - функция для определения логики включения CORS. Данная функция в качестве первого аргумента принимает источник запроса, в качестве второго - колбэк в виде (error: object, allow: boolean) => void
• methods - настраивает заголовок Access-Control-Allow-Methods. Принимает строку или массив с разрешенными методами
• allowedHeaders - настраивает заголовок Access-Control-Allow-Headers. Принимает строку или массив с разрешенными заголовками
• exposedHeaders - настраивает заголовок Access-Control-Expose-Headers. Принимает строку или массив с разрешенными кастомными заголовками. По умолчанию данная натройка отключена
• credentials - настраивает заголовок Access-Control-Allow-Credentials. Принимает логическое значение. По умолчанию данная настройка отключена
• maxAge - настраивает заголовок Access-Control-Max-Age. Принимает целое число. Отключена по умолчанию
• preflightContinue - передает предварительный CORS-ответ следующему обработчику
• optionsSuccessStatus - предоставляет статус-код для успешного разрешения запросов OPTIONS (для некоторых старых браузеров)

Настройки по умолчанию:

{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}