Шпаргалка по 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. Возможные значения:
    • booleanfalse отключает 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
}
Вам также может понравиться

Другие похожие посты