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

Начало работы с CORS

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

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

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

В начале создадим новый проект ASP.NET Core по типу Empty:

CORS в ASP.NET Core

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

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace CorsApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(); // добавляем сервисы CORS
        }

        public void Configure(IApplicationBuilder app)
        {
            
            app.UseDeveloperExceptionPage();

            app.UseRouting();
			
            // подключаем CORS
            app.UseCors(builder => builder.AllowAnyOrigin());
			
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });
        }
    }
}

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

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

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

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

Стоит отметить, что метод app.UseCors() должен вызываться между методами app.UseRouting() и app.UseEndpoints().

В итоге всем подключенным клиентам данное приложение будет отправлять строку "Hello World!".

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

using Microsoft.AspNetCore.Builder;

namespace TestCors
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }
    }
}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test CORS</title>
</head>
<body>
    <div id="result">

    </div>
    <div><p><button id="btn" value="Запрос">Запрос</button></p></div>

    <script>
        var btn = document.getElementById("btn");
        var result = document.getElementById("result");
        var request = new XMLHttpRequest();

        btn.addEventListener("click", function (e) {
            request.open("GET", "http://localhost:49352/");
            request.onreadystatechange = reqReadyStateChange;
            request.send();
        });

        function reqReadyStateChange() {
            if (request.readyState == 4) {
                var status = request.status;
                if (status == 200)
                    result.innerText = request.responseText;
                else
                    result.innerText = request.statusText;
            }
        }
    </script>
</body>
</html>

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

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

CORS в ASP NET Core 3.0

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

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