Устранение ошибки «Заголовки заголовка запроса Access-Control-Allow-Headers не разрешены заголовками Access-Control-Allow-Headers»

In попытка исправить первоначальную ошибку, к запросу были добавлены заголовки, разрешающие различные методы и заголовки. Однако это привело к новой ошибке: «Поле заголовка запроса Access-Control-Allow-Origin не разрешено Access-Control-Allow-Headers».

Понимание CORS и предполетных запросов

Проблема связана с тем, что браузеры отправляют предполетный запрос OPTIONS для запросов из разных источников с определенными типами контента. По умолчанию Angular отправляет данные с типом контента application/json, который запускает этот предварительный запрос.

Ответ и заголовки сервера

Сервер должен явно разрешить доступ Заголовок Control-Allow-Headers в ответе, чтобы предотвратить ошибку. В противном случае браузер интерпретирует ответ как не допускающий никаких заголовков.

Решение: изменение типа контента или ответа сервера

Чтобы решить проблему, измените клиент или конфигурация сервера:

1. Клиентская сторона (Angular):

Перезапишите тип контента Angular по умолчанию на application/x-www-form-urlencoded, который не запускает предварительный запрос:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2. Серверная сторона:

Альтернативно разрешите заголовок Access-Control-Allow-Headers на сервере. Должны быть установлены следующие заголовки ответа:

• Access-Control-Allow-Origin: * или конкретный источник (например, https://example.com)
• Access-Control -Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: все заголовки, которые клиент отправляет в запросе (например, Content-Type, Authorization)