QPANC - Parte 8 - ASP.NET - CORS

QPANC são as iniciais de Quasar PostgreSQL ASP NET Core.

• Source
• Introdução
• Parte I - ASP.NET - Inicializando os Projetos
• Parte 2 - PostgreSQL
• Parte 3 - ASP.NET - Registrando Serviços e Lendo Variáveis de Ambiente
• Parte 4 - ASP.NET - Entity Framework e ASP.NET Core Identity
• Parte 5 - ASP.NET - Documentação Interativa com Swagger
• Parte 6 - ASP.NET - Regionalização
• Parte 7 - ASP.NET - Autenticação e Autorização
• Parte 8 - ASP.NET - CORS
• Parte 9 - Quasar - Criação e Configuração do Projeto
• Parte 10 - Quasar - Configurações e Customizações
• Parte 11 - Quasar - Componentes - Diferença entre SPA e SSR
• Parte 12 - Quasar - Serviços
• Parte 13 - Quasar - Regionalização e Stores
• Parte 14 - Quasar - Consumindo a API
• Parte 15 - Quasar - Login
• Parte 16 - Quasar - Áreas Protegidas
• Parte 17 - Quasar - Registro
• Parte 18 - Docker - Maquina Virtual Linux
• Parte 19 - Docker - Registro e Build
• Parte 20 - Docker - Traefik e Publicação
• Demo Online

14 Ativando o CORS

Por enquanto, nós testamos a API usando o Swagger, que é executado do mesmo domínio, porém o app feito usando o Quasar será executado de outro domínio, especialmente.

O primeiro passo, é adicionar o serviço que irá ler as configurações relativas ao CORS.:

QPANC.Services.Abstract/Business/ICors.cs

namespace QPANC.Services.Abstract
{
    public interface ICors
    {
        string[] Hosts { get; }
    }
}

QPANC.Services/Business/Cors.cs

using Microsoft.Extensions.Configuration;
using QPANC.Services.Abstract;
using IConfiguration = QPANC.Services.Abstract.IConfiguration;

namespace QPANC.Services
{
    public class Cors : ICors
    {
        private IConfiguration _configuration;

        public Cors(IConfiguration configuration)
        {
            this._configuration = configuration;
        }

        public string[] Hosts
        { 
            get 
            {
                var hosts = this._configuration.Root
                    .GetSection("CORS_HOSTS")
                    .AsEnumerable()
                    .Select(pair => pair.Value)
                    .Where(value => !string.IsNullOrWhiteSpace(value))
                    .ToArray();
                return hosts ;
            }
        }
    }
}

Agora, adicione a respectiva variável de ambiente ao docker-compose.override.yml

services:
  qpanc.api:
    environment:
      - CORS_HOSTS__0=localhost

caso precise permitir múltiplos domínios, adicione as variáveis CORS_HOSTS__1, CORS_HOSTS__2 até a CORS_HOSTS__n.

Enquanto estamos desenvolvendo, iremos liberar apenas o localhost.

Claro, deverá adicionar o QPANC.Services.Abstract.ICors ao QPANC.Services.Abstract.IAppSettings e o QPANC.Services.Cors ao QPANC.Services.AppSettings.

Assim como adicionar services.AddSingleton<ICors, Cors>(); ao QPANC.Api.Extensions.ServiceCollectionExtensions.

Agora, precisamos criar um arquivo de options para a configuração do Cors:

QPANC.Api/Options/Cors.cs

using Microsoft.AspNetCore.Cors.Infrastructure;
using Microsoft.Extensions.Options;
using QPANC.Services.Abstract;
using System;
using System.Linq;

namespace QPANC.Api.Options
{
    public class Cors : IConfigureOptions<CorsOptions>
    {
        private ICors _settings;

        public Cors(ICors settings)
        {
            this._settings = settings;
        }

        public void Configure(CorsOptions options)
        {
            options.AddDefaultPolicy(builder =>
            {
                builder
                    .SetIsOriginAllowed(url => {
                        var host = new Uri(url).Host;
                        return this._settings.Hosts.Contains(host);
                    })
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials();
            });
        }
    }
}

Por fim, precisamos aplicar esta configuração no Startup:

QPANC.API/Startup.cs

namespace QPANC.Api
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public void ConfigureServices(IServiceCollection services)
        {
            services.ConfigureOptions<Options.Cors>();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ISeeder seeder)
        {
            app.UseCors();
        }
    }
}

Com isto, dou por finalizado a parte referente ao ASP.NET Core, assim podemos voltar a nossa atenção para o Quasar.