Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7
По умолчанию в целях безопасности браузер ограничивает ajax-запросы между различными доменами. Однако нередко возникает ситуация, когда необходимо выполнять запросы из приложения с одного адреса (или домена) к приложению, которое размещено по другому адресу. Для этого нам надо использовать технику, которая называется CORS (Cross Origin Resource Sharing).
В начале создадим новый проект ASP.NET Core по типу Empty:
Этот проект будет получать запросы от других приложений и отправлять им ответ. Для этого изменим его класс 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">
Запустим оба проекта и во втором приложении нажмем на кнопку, чтобы получить ответ от первого приложения: