CORS и кросс-доменные запросы в ASP.NET Core. Конфигурация CORS

Содержание

Методы CorsPolicyBuilder
Итого

В предыдущей части мы познакомились с технологией CORS и использовали её в нашем приложении ASP.NET Core для того, чтобы позволить другому приложению получать доступ к ресурсам. В этой части мы более детально рассмотрим CORS и то, как можно конфигурировать работу CORS в ASP.NET Core.

Методы CorsPolicyBuilder

В предыдущей части, в вызове app.UseCors() мы настроили конфигурацию CORS следующим образом:

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

тем самым, разрешив запросы со всех адресов/хостов. При этом, в классе CorsPolicyBuilder имеется ряд других полезных методом, позволяющих более точно настроить CORS, а именно:

`AllowAnyHeader()`	Принимаются запросы с любыми заголовками
`AllowAnyMethod()`	Принимаются любые HTTP-методы(GET/POST/PUT и т.д.)
`AllowAnyOrigin()`	Принимаются запросы от любых источников (с любого хоста/адреса)
`AllowCredentials()`	Допускается принимать учётные данные от пользователей, например аутентификационные куки
`DisallowCredentials()`	Запрещает принимать учётные данные от пользователей
`WithHeaders(String[])`	Принимаются только те запросы, которые содержат определенные заголовки
`WithMethods(String[])`	Принимаются только указанные HTTP-методы
`WithOrigins(String[])`	Запросы принимаются только от указанных источников

Например, на данный момент наше приложение принимает запросы от любых источников:

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 напишем такой клиент для выполнения запросов к нашему приложению:

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

            builder.Services.AddHttpClient();
            
            var app = builder.Build();

            app.UseDefaultFiles();
            app.UseStaticFiles();

            app.Run();
        }
    }
}

и добавим в папку wwwroot файл index.html, который мы создали ранее:

<!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>

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

app.UseCors(options => options.WithOrigins(new[] { "http://localhost:5033"}));

здесь мы указываем, что разрешаем получать запросы от указанного источника — http://localhost:5033. Запустим приложение API:

теперь запустим клиент:

Пробуем выполнить запрос к API:

Запрос был отклонен, так как указанный в политике CORS допустимый источник не соответствует источнику с которого произошел запрос. Попробуем открыть наше приложение по адресу без https — это второй адрес http://localhost:5033/

Запрос прошел успешно. Аналогичным образом могут использоваться и другие методы CorsPolicyBuilder для настройки конфигурации CORS в ASP.NET Core. При этом, мы можем вызывать несколько методов для более точной настройки CORS, например:

app.UseCors(options => options.WithOrigins("https://localhost:7264")
                              .AllowAnyHeader()
                              .WithMethods("GET"));

Итого

Конфигурирование CORS осуществляется в методе UseCors() с помощью методов объекта CorsPolicyBuilder. Так, мы можем указать перечень источников (адресов) с которых могут обрабатываться кросс-доменные запросы, определить перечень допустимых методов и т.д.