Il modo più semplice per abilitare CORS per tutti gli endpoint consiste nell'aggiungere una policy CORS predefinita nella classe Startup.
Il codice seguente mostra le due righe di codice da aggiungere:
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
public void ConfigureServices(IServiceCollection services)
{
//1 - Add default CORS policy - I am simply allowing everything
services.AddCors(o =>
o.AddDefaultPolicy(b =>
b.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()));
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseHttpsRedirection();
app.UseRouting();
//2 - Adds CORS middleware. This must be placed AFTER app.UseRouting().
app.UseCors();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
}
Code language: C# (cs)Nota:inserisci qualsiasi norma CORS abbia senso per te. Nel codice sopra, sto semplicemente consentendo tutto.
Test CORS localmente
Per testarlo localmente puoi chiamare la tua API web da un browser da una pagina in esecuzione su una porta diversa. Chrome applica CORS anche quando il numero di porta è diverso, quindi il test ci semplifica le cose.
Ho la seguente configurazione:
- La mia API Web ASP.NET è in esecuzione su localhost:44379
- La mia pagina di test è in esecuzione su localhost:44395
1 – Crea una pagina web che richiami il tuo endpoint
Ho una pagina con un pulsante che dice [Invia ping]. Chiama il mio endpoint dell'API Web e registra i risultati.
<script type="text/javascript" language="javascript">
function sendPing() {
fetch("https://localhost:44379/ping")
.then(data => console.log(data))
.then(res => console.log(res))
.catch(error=>console.error(error))
}
</script>
<div class="text-center">
<button type="submit" onclick="javascript:sendPing()">Send ping</button>
</div>
Code language: HTML, XML (xml)2 – Prima di abilitare CORS, verifica di ottenere un 405 – Metodo non consentito
Per poter verificare che la policy CORS funzioni, devo prima verificare che ottenga un 405 – Metodo non consentito quando la policy CORS non è abilitata.
3 – Dopo aver abilitato CORS, verifica che la tua richiesta sia ora consentita
Ho aggiunto la politica CORS alla mia API web. Quindi, nella mia pagina di prova nel browser, ho fatto clic sul pulsante [Invia ping] e ho verificato che questa richiesta di origine incrociata è ora consentita.
