Почему в браузере возникает ошибка «No ‘Access-Control-Allow-Origin’ header is present», в то время как в Postman такой проблемы нет?

Среди разработчиков, особенно тех, кто только начинает знакомство с JavaScript, часто встречается ситуация, когда при попытке выполнить запрос к RESTful API через XMLHttpRequest или fetch в браузере возникает ошибка:

XMLHttpRequest cannot load http://api.example.com/data. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

С другой стороны, при выполнении аналогичного запроса через расширение для браузера Chrome, известное как Postman, такой проблемы не возникает.

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

Эта ошибка возникает из-за политики одного источника (Same-Origin Policy), которую браузеры принимают для безопасности. Согласно этой политике, скрипт, работающий на веб-странице, может обращаться только к ресурсам того же источника, с которого была загружена веб-страница.

В контексте этой политики, два URL считаются одним и тем же источником, если совпадают протокол, домен и порт. Если хотя бы один из этих элементов отличается, ресурсы считаются разными источниками.

Следовательно, если JavaScript код на веб-странице пытается выполнить запрос к API, который находится на другом домене, браузер блокирует запрос и выдает ошибку, указанную выше.

Почему Postman не выдает такую ошибку?

Postman — это инструмент для тестирования API, и он не является браузером. Postman не обязан следовать политике одного источника, поэтому он может свободно выполнять запросы к любому API, независимо от его источника.

Как обойти эту ошибку?

Чтобы обойти эту ошибку в браузере, нужно настроить API таким образом, чтобы он добавлял заголовок ‘Access-Control-Allow-Origin’ в ответ на запрос. Этот заголовок сообщает браузеру, что API разрешает доступ с других источников.

Это можно сделать следующим образом (пример для Node.js Express сервера):

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
});

Однако, нужно помнить, что добавление этого заголовка может привести к уязвимостям в безопасности, поэтому его нужно использовать с осторожностью. Вместо использования символа ‘*’, который разрешает доступ со всех источников, лучше указать конкретные домены, которым разрешен доступ.