Использование CORS в Node.js

Слово CORS означает «Совместное использование ресурсов между источниками». Cross-Origin Resource Sharing — это механизм, основанный на HTTP-заголовке, реализованный браузером, который позволяет серверу или API (интерфейс прикладного программирования) указывать любые источники (отличающиеся с точки зрения протокола, имени хоста или порта), отличные от источника, из которого неизвестный источник получает разрешение на доступ и загрузку ресурсов. Пакет cors, доступный в реестре npm, используется для устранения ошибок CORS в приложении Node.js.

Давайте разберемся на примере.

Шаг 1: Установка

Поскольку пакет CORS доступен в npm (диспетчере пакетов узла), который является сторонним пакетом Node.js, мы должны установить Node.js в нашей локальной системе. Для проверки введите следующую команду в терминале.

node -v

Команда покажет версию Node.js, установленную в вашей системе. Если выдает какую-то ошибку, заставьте правильно установить Node.js.

Шаг 2: Настройка проекта и структура папок. Сначала создайте в своей системе папку с именем «geeksforgeeks» и перейдите в нее с помощью командной строки. Для этого используйте следующую команду.

mkdir geeksforgeeks && cd geeksforgeeks

Внутри этой папки создайте две отдельные папки: клиентскую и серверную ( используя ту же команду mkdir ). Также внутри клиента папка создает файлы index.html и srcipt.js. Внутри папки сервера введите следующую команду для создания файла package.json:

npm init

Теперь создайте файл index.js в папке сервера, чтобы написать логику на стороне сервера. Наша текущая структура папок должна выглядеть так.

Структура проекта: Это будет выглядеть следующим образом.

Шаг 3: Теперь в том же каталоге установите необходимые пакеты (express и cors), используя следующую команду:

npm install express cors

Шаг 4: Это код внутри файла index.html. Это основной HTML-код, который будет показан клиенту в браузере.

HTML

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport"

          content="width=device-width, initial-scale=1.0">

    <title>Sample webpage</title>

    <script src="script.js"></script>

</head>



<body></body>



</html>



Шаг 5: Это код внутри файла script.js. Файл script.js будет использоваться для получения данных с сервера для заполнения внешнего интерфейса.

script.js

// script.js file
// Fetching data from server running at port 5000.

fetch('http://localhost:5000/secret')
.then((res) => res.json())
.then((data) => console.log(data));

Шаг 6: Клиентская часть работает на порту 5500. Теперь давайте посмотрим на проблему без ошибок. Теперь давайте создадим сервер Express в index.js без пакета cors, чтобы показать ошибку CORS.

index.js

// index.js file

// Requiring module
const express = require('express')
const cors = require('cors')

// Creating express app 
const app = express()

// Sample api routes for testing
app.get('/',(req, res) => {
    res.json("welcome to our server")
});

app.get('/secret',(req, res) => {
    const secret =  Math.floor(Math.random()*100)
    res.json({secret})
});

// Port Number
const port = 5000;

// Server setup
app.listen(port, () => {
    console.log(`Server running on port ${port}.`)
});

Шаг для запуска приложения : Запустите сервер, введя следующую команду:

node index.js

Вывод: это приведет к ошибке CORS, и желаемые ресурсы не будут получены из конечных точек API.

Шаг 7: Включение CORS для всех маршрутов сервера, новый index.js понравится.

index.js

//index.js file
// Requiring module
const express = require('express')
const cors = require('cors')

// Creating express app 
const app = express()

// Enabling CORS for any unknown 
// origin(https://xyz.example.com)
app.use(cors());

// Sample api routes for testing
app.get('/',(req, res) => {
    res.json("welcome to our server")
});

app.get('/secret',(req, res) => {
    const secret =  Math.floor(Math.random()*100)
    res.json({secret})
});

// Port Number
const port = 5000;

// Server setup
app.listen(port, () => {
    console.log(`Server running on port ${port}.`)
});

Мы должны использовать дополнительные две строки, чтобы включить CORS для всех маршрутов.

const cors = require(cors)
app.use(cors())  # this line enables CORS action for all routes as no argument has been passed.

Вывод: это приведет к желаемому результату, как мы видим ниже.

Шаг 8: Теперь давайте создадим CORS для указанного маршрута. Но может быть случай, когда только определенное количество маршрутов на нашем сервере должно быть разрешено обслуживать ресурсы для любых источников XYZ, и нам необходимо защитить другие маршруты от потенциального злоумышленника (любой URL-адрес, не соответствующий политике того же происхождения) из-за к конфиденциальности. Здесь мы включим запросы CORS для определенного количества маршрутов, как показано ниже.

index.js

// Requiring module
const express = require('express')
const cors = require('cors')

// Creating express app 
const app = express()

// Enabling CORS for some specific origins only.
let corsOptions = {
    origin : ['http://localhost:5500'],
}

app.use(cors(corsOptions))

// Sample api routes for testing
app.get('/',(req, res) => {
    res.json("welcome to our server")
});

app.get('/secret', cors(corsOptions) , (req, res) => {
    const secret =  Math.floor(Math.random()*100)
    res.json({secret})
});

// Port Number
const port = 5000;

// Server setup
app.listen(port, () => {
    console.log(`Server running on port ${port}.`)
});

Мы разрешаем запросы из определенных источников с помощью объекта corsOptions.

let corsOptions = {
    origin : ['http://localhost:5500'],
}    
# this corsOptions object enables CORS action for all origins running on port 5500 only.
# So if an application is running on any port other than 5000(own origin) and 5500, 
  no CORS action will be enabled.

Выход: