Blazor не может подключиться к ASP. NET Core WebApi (CROS) - PullRequest
Новая
       108

Blazor не может подключиться к ASP. NET Core WebApi (CROS)

0 голосов
/ 12 июля 2020

У меня есть ASP. NET Core Server, работающий на локальном IP https://192.168.188.31:44302 с точками Web API Enpoints. Я могу подключиться к указанному серверу с помощью VS Code REST Client. Теперь я хочу подключиться к веб-API с Blazor WebAssembly, работающим на https://192.168.188.31:5555.

Мой код Blozor: 

@page "/login"
@inject HttpClient Http

[ ... some "HTML"-Code ... ]

@code {
    private async Task Authenticate()
    {
        var loginModel = new LoginModel
        {
            Mail = "some@mail.com",
            Password = "s3cr3T"
        };
        var requestMessage = new HttpRequestMessage()
        {
            Method = new HttpMethod("POST"),
            RequestUri = ClientB.Classes.Uris.AuthenticateUser(),
            Content =
                JsonContent.Create(loginModel)
        };

        var response = await Http.SendAsync(requestMessage);
        var responseStatusCode = response.StatusCode;

        var responseBody = await response.Content.ReadAsStringAsync();

        Console.WriteLine("responseBody: " + responseBody);
    }

    public async void LoginSubmit(EditContext editContext)
    {
        await Authenticate();
        Console.WriteLine("Debug: Valid Submit");
    }
}

Когда я теперь запускаю LoginSubmit, я получаю следующую ошибку: сообщение в консоли разработчика Chrome и Firefox: login:1 Access to fetch at 'https://192.168.188.31:44302/user/authenticate' from origin 'https://192.168.188.31:5555' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Я новичок в веб-разработке и обнаружил, что вам необходимо включить CORS на стороне сервера ASP. NET Основной проект, поэтому я расширил startup.cs на 

readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<UserDataContext, UserSqliteDataContext>();

services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        builder =>
        {
            builder.WithOrigins("https://192.168.188.31:44302",
                "https://192.168.188.31:5555",
                "https://localhost:44302", 
                "https://localhost:5555")
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});

services.AddControllers();
services.AddApiVersioning(x =>
{
...
});

services.AddAuthentication(x =>
    ...
});
services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies());

services.AddScoped<IViewerService, ViewerService>();
}

public void Configure(IApplicationBuilder app,
    IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    Program.IsDevelopment = env.IsDevelopment();

    app.UseHttpsRedirection();
    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();
    app.UseCors(MyAllowSpecificOrigins);

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    Log.Initialize();
}

Но я все равно получаю сообщение об ошибке выше. Я что-то не так делаю с настройкой CORS? Почему он работает должным образом с клиентом VS Code REST и как я ошибаюсь в вызове в приложении Blazor WASM?

1 Ответ

0 голосов
/ 16 июля 2020

Проблема, вызывающая сообщение об ошибке login:1 Access to fetch at 'https://192.168.188.31:44302/user/authenticate' from origin 'https://192.168.188.31:5555' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled., была вызвана HttpsRedirection.

Чтобы решить проблему, либо деактивируйте HttpsRedirection, удалив строку app.UseHttpsRedirection(); в функции Configure, либо добавьте правильные порты для перенаправления в функции ConfigureServices (рекомендуемый способ).

В моем случае я запускаю свой WebAPI на порту 44302, поэтому мое решение выглядит так (вы должны адаптировать его к номеру вашего порта ): 

if (Program.IsDevelopment)
{
    services.AddHttpsRedirection(options =>
    {
        options.RedirectStatusCode = StatusCodes.Status308PermanentRedirect;
        options.HttpsPort = 44302;
    });
}
else
{
    services.AddHttpsRedirection(options =>
    {
        options.RedirectStatusCode = StatusCodes.Status308PermanentRedirect;
        options.HttpsPort = 443;
    });
}

Также обратите внимание, что достаточно добавить IP-адрес запрашивающего API в CORS следующим образом: 

services.AddCors(options =>
{
    options.AddPolicy(name: specificOrigins,
        builder =>
        {
            builder.WithOrigins("https://192.168.188.31:5555",
                "http://192.168.188.31:5444")
            .AllowAnyHeader()
            .AllowAnyMethod();
        });
});
...