CORS и кросс-доменные запросы в ASP.NET Core. Введение

Содержание

Демонстрация проблемы с CORS
Использование CORS в ASP.NET Core
Итого

CORS (Cross-origin resource sharing — «совместное использование ресурсов между разными источниками») — это технология современных браузеров, которая позволяет предоставить веб-страницам доступ к ресурсам другого домена. По умолчанию веб-браузеры в целях безопасности ограничивают ajax-запросы между различными доменами и такое поведение, иногда, может оказаться неприемлемым для наших приложений ASP.NET Core. В этом случае мы должны использовать возможности платформы ASP.NET Core для настройки CORS в своем приложении.

Демонстрация проблемы с CORS

Допустим, мы разрабатываем приложение Web API, которое должно взаимодействовать с различными клиентами в Сети и возвращать JSON-объекты. Пусть оно будет таким:

namespace AspCorsSource
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);
            var app = builder.Build();

            app.MapGet("/", () => Results.Ok(new { name = "Tom", age=25, organization = "Microsoft"}));

            app.Run();
        }
    }
}

если мы запустим это приложение, то сразу увидим JSON-объект, содержащий три пары:

Теперь, появляется новый клиент нашего API, который разрабатывает свой проект, используя AJAX и всякие другие крутые вещи и пишет следующее приложение:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>API Client</title>
</head>
<body>
    <h2 id="result"></h2>
    <button id="btn" value="Запрос">Запрос</button>

    <script>
        const btn = document.getElementById("btn");
        const result = document.getElementById("result");
        btn.addEventListener("click", async () => {

        try {
            const response = await fetch("http://localhost:5000/");
            if (response.ok) result.innerText = await response.text();
        }
        catch (e) {
            result.innerText = e.message;
        }
        });
    </script>
</body>
</html>

По сути, в этом приложении нет ничего сложного — мы просто запрашиваем главную страницу нашего API и ожидаем увидеть всё тот же JSON. Но так как браузер использует по умолчанию CORS, то клиент увидит следующее:

Собственно, это и есть демонстрация проблемы использования CORS при разработке веб-приложений, которая может вызвать немало бессонных ночей у начинающих разработчиков. Рассмотрим, как мы можем обойти эту проблему в ASP.NET Core и настроить в своем приложении CORS

Использование CORS в ASP.NET Core

Изменим наш проект API следующим образом:

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.Services.AddCors(); //добавляем сервис CORS

        var app = builder.Build();

        app.UseCors(options=>options.AllowAnyOrigin()); //используем middleware для CORS

        app.MapGet("/", () => Results.Ok(new { name = "Tom", age=25, organization = "Microsoft"}));

        app.Run();
    }
}

Здесь мы подключили сервис для работы CORS:

builder.Services.AddCors();

и встроили в конвейер обработки запроса компонент middleware для использования CORS

app.UseCors(options=>options.AllowAnyOrigin());

Для конфигурации параметров CORS метод UseCors() использует делегат, в который передается объект типа CorsPolicyBuilder с помощью которого можно выполнить настройку CORS. Так, в нашем приложении мы использовали настройку:

options=>options.AllowAnyOrigin()

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

Проверим теперь работу нашего приложения и клиента. Запускаем приложение API:

Теперь отправим запрос с клиента:

Как можно видеть на скриншоте — запрос прошел успешно и клиент получил ответ с JSON-объектом от сервера.

Итого

По умолчанию, современные браузеры, в целях безопасности, запрещают кросс-доменные AJAX-запросы, что может вызвать проблемы при взаимодействии приложений ASP.NET Core с другими веб-приложениями. Чтобы разрешить кросс-доменные запросы в ASP.NET Core нам необходимо задействовать CORS — добавить в приложение сервис для работы с CORS и добавить в конвейер обработки запросов компонент middleware для использования CORS.