При разработке приложений Angular вы можете столкнуться с неприятной ошибкой «В запрошенном ресурсе нет заголовка ‘access-control-allow-origin’», широко известной как ошибка политики Angular CORS. Эта ошибка возникает, когда вы делаете запрос из другого домена или порта, а сервер не включает в ответ необходимые заголовки CORS. В этой статье мы рассмотрим несколько методов устранения этой ошибки, а также примеры кода для каждого подхода.

Метод 1. Настройка CORS на сервере
Один из способов устранения ошибки CORS — настроить сервер на включение соответствующего заголовка Access-Control-Allow-Origin. Этот заголовок указывает, каким доменам разрешен доступ к ресурсам сервера. Вот пример настройки CORS в популярных серверных платформах:

Node.js (Express.js):

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});
// Rest of your server code

ASP.NET (C#):

protected void Application_BeginRequest()
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
}
// Rest of your server code

Метод 2: использование прокси-сервера.
Другой подход — настроить прокси-сервер, который перенаправляет запросы от вашего приложения Angular на целевой сервер, эффективно обходя ограничения CORS, налагаемые браузером. Этот метод особенно полезен во время разработки. Вот пример настройки прокси с помощью Angular CLI:

Создайте файл с именем proxy.conf.jsonв корне вашего проекта Angular:

{
  "/api/*": {
    "target": "http://api.example.com",
    "secure": false,
    "changeOrigin": true
  }
}

В файле package.jsonдобавьте флаг --proxy-configв скрипт start:

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

Метод 3: настройка параметров HttpClient Angular
Модуль HttpClient Angular предоставляет параметры для изменения поведения CORS. По умолчанию модуль отправляет заголовок Originс текущим доменом. Однако вы можете переопределить это поведение или вообще отключить проверки CORS. Вот пример:

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
getData() {
  const url = 'http://api.example.com/data';
  const headers = {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
  };
  return this.http.get(url, { headers, withCredentials: false });
}

Ошибка политики Angular CORS может быть распространенной проблемой, с которой сталкиваются при веб-разработке. К счастью, существует несколько способов справиться с этой ошибкой. В этой статье мы рассмотрели три подхода: настройка CORS на сервере, использование прокси-сервера и настройка параметров Angular HttpClient. Используя эти методы, вы можете преодолеть ошибку CORS и обеспечить бесперебойную связь между вашим приложением Angular и внешними серверами.

Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта, соображениям безопасности и среде развертывания. Применив соответствующий метод и следуя предоставленным примерам кода, вы сможете успешно устранить ошибку политики Angular CORS и продолжить создание надежных веб-приложений.