DEV Community

Tobias Mesquita for Quasar Framework Brasil

Posted on

QPANC - Parte 8 - ASP.NET - CORS

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

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.

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay