web-dev-qa-db-fra.com

Angular 6 - La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: pas d'en-tête 'Access-Control-Allow-Origin'

J'obtiens une erreur CORS lorsque j'appelle un POST ou un DELETE Core API à partir de mon application Angular.

Les API Web My Core sont configurées avec l'authentification Windows. Et (Autoriser]} _l'attribut est au niveau du contrôleur. Chaque fois que je passe une demande GET à Angular, la demande est autorisée et la réponse est renvoyée.

Lors de l'envoi d'une demande POST de Angular à Core API,

1) Si je transmets des données en tant que FormData du service Angular à Core API, cela fonctionne correctement.

2) Si je transmets des données en tant que modèle du service Angular à l'API principale, le message d'erreur ci-dessous s'affiche.

Échec du chargement de http: // localhost: 63854/api/sampleController/1 : la réponse à la demande de contrôle en amont ne réussit pas le contrôle du contrôle d'accès: aucun en-tête 'Accès-Contrôle-Autoriser-Origine' n'est présent sur la ressource demandée. . Origin ' http: // localhost: 52871 ' n'est donc pas autorisé.

Voici Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("AllowAll",
        builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()));

    services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("AllowAll");

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseMvc();
    app.UseSwagger();
    app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "APIs"));
    app.UseMvcWithDefaultRoute();
}

Méthode d'action de l'API principale:

[Authorize]
[Produces("application/json")]
[Route("api/someRoute")]

public class someController : Controller
{
    [HttpPost]
    [Route("update")]
    public async Task<HttpResponseMessage> UpdateAccessType([FromBody] TestModel modalObj)
    {
         //code..
    }

    [HttpDelete("{id}")]
    public async Task<HttpResponseMessage> DeleteAccessType(string id)
    {
        //code..
    }
}

Service angulaire: accessType est construit en composant et transmis en tant qu'objet au service angulaire.

updateAccessType(accessType) {
    return this.http.post(this.apiUrl + "api/someController/update", accessType);
}

deleteAccessType(accessLookupId: string) {
    return this.http.delete(this.apiUrl + "api/someController/" + accessLookupId);
}

Message d'erreur complet (Mais cela ne se produit que lors de la transmission de données en mode modal, et non lors de la transmission de données en tant que FormData) - Les requêtes DELETE et POST donnent la même exception.

Erreur HTTP 401.2 - Non autorisé - Vous n'êtes pas autorisé à afficher cette page en raison d'en-têtes d'authentification non valides.

J'aime passer du modèle de Angular à l'API de base au lieu de FormData.

c#angularasp.net-corecors
3
Madhu

Essayez d'utiliser ci-dessous dans la méthode Configure à la place:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
}
1
User3250

Si vous souhaitez utiliser Cors, en combinaison avec l'authentification Windows, vous devez également activer "Authentification anonyme". A essayé toutes les autres solutions, mais sans succès.

Dans Angular, j'ai dû implémenter HttpInterceptor pour le mettre au travail.

import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
    });

    return next.handle(request);
  }
0
Peter Vögeli