CORS и кросс-доменные запросы

Подключение CORS в приложении

Последнее обновление: 08.05.2022

По умолчанию веб-браузеры в целях безопасности ограничивают ajax-запросы между различными доменами. Однако нередко возникает ситуация, когда необходимо выполнять запросы из приложения с одного адреса (или домена) к приложению, которое размещено по другому адресу. Для этого нам надо использовать технику, которая называется CORS (Cross Origin Resource Sharing).

Добавление и настройка сервисов CORS

Возьмем простейший проект ASP.NET Core по типу Empty и в файле Program.cs определим следующий код:

var builder = WebApplication.CreateBuilder();

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

var app = builder.Build();

// настраиваем CORS
app.UseCors(builder => builder.AllowAnyOrigin());

app.Map("/", async context => await context.Response.WriteAsync("Hello METANIT.COM!"));

app.Run();

Для подключения сервисов CORS в приложении вызывается метод builder.Services.AddCors().

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

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

С помощью метода AllowAnyOrigin() мы указываем, что приложение может обрабатывать запросы с любых доменов/адресов.

В качестве ответа клиенту приложение будет отправлять строку "Hello METANIT.COM!".

Тестирование CORS

Для тестирования создадим второй проект также ASP.NET Core по типу Empty и определим в этом проекте в файле Program.cs следующий код:

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

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

app.Run();

Здесь мы будем работать только со статическими файлами. В частности, определим в этом проекте в папке wwwroot html-страницу index.html, которая будет загружаться по умолчанию:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test CORS</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("https://localhost:7199/");
            if (response.ok) result.innerText = await response.text();
        }
        catch (e) {
            result.innerText = e.message;
        }
        });
    </script>
</body>
</html>

В данном случае по нажатию на кнопку будет выполняться ajax-запрос к первому приложению, который, в моем случае, будет запускаться по адресу "https://localhost:7199/". Полученный от первого приложения ответ будет загружаться в элемент заголовка <h2 id="result">

Запустим оба проекта и во втором приложении нажмем на кнопку, чтобы получить ответ от первого приложения:

CORS и кроссдоменные запросы в ASP NET Core и C#

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850