web-dev-qa-db-fra.com

L'accès à xmlhttprequest à partir d'Origin a été bloqué par la politique des cors dans Angular 6

J'utilise le framework Asp.Net Core Boilerplate pour mon projet côté serveur. Angular 6 utilisant pour le projet côté client. Projet côté serveur fonctionnant sans aucune erreur. (L'affichage de l'API Swagger - et les API fonctionnent également)

Aucune erreur de compilation du projet Angular. Lorsque vous exécutez le projet angular à l'aide de Google Chrome, ( http: // localhost: 4200 / =) il affiche le message d'erreur suivant.

enter image description here

La console du navigateur affiche ceci: -

L'accès à XMLHttpRequest à ' http://server.projectName.lk//AbpUserConfiguration/GetAll ' from Origin ' http: // localhost: 42 ' a été bloqué par CORS stratégie: la réponse à la demande de contrôle en amont ne passe pas la vérification du contrôle d'accès: aucun en-tête "Access-Control-Allow-Origin" n'est présent sur la ressource demandée.

Lorsque vous cliquez sur le lien '' http://server.projectName.lk//AbpUserConfiguration/GetAll '', il s'ouvre dans un autre onglet et affiche l'erreur ci-dessous,

enter image description here

Appréciez grandement vos idées pour résoudre ce problème ..

REMARQUE: Aucune question précédente ne m'a donné de solution.

Ceci est le journal des erreurs de débogage que vous recevez pour ce problème

> The thread 0x54b0 has exited with code 0 (0x0).
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request
> starting HTTP/1.1 OPTIONS
> http://localhost:21021/AbpUserConfiguration/GetAll  0
> Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information: CORS
> policy execution failed.
> Microsoft.AspNetCore.Cors.Infrastructure.CorsService:Information:
> Request Origin http://localhost:4200 does not have permission to
> access the resource.
> Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request
> finished in 311.689ms 204 
> Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker:Information:
> Route matched with {action = "Index", controller = "Home", area = ""}.
> Executing action San.BA.Web.Host.Controllers.HomeController.Index
> (San.BA.Web.Host) The program '[21292] dotnet.exe' has exited with
> code -1 (0xffffffff).

fichier startup.cs

3
Mohan Perera

Le partage de ressources Cross Origin (CORS) est une norme W3C qui permet à un serveur d'assouplir la même politique d'origine. À l'aide de CORS, un serveur peut explicitement autoriser certaines demandes cross-origin tout en rejetant d'autres. CORS est plus sûr et plus flexible que les techniques antérieures, telles que JSONP. Cette rubrique montre comment activer CORS dans une application ASP.NET Core.

Cela se produit en raison de l'échec de la stratégie CORS côté serveur. Comme vous devez ajouter l'URL du client dans le fichier appsettings.json dans Host Project.

"App": { ...... "CorsOrigins": "http://localhost:4200" ...... }

Pour plus d'informations, vous pouvez vérifier l'URL suivante:
https://docs.Microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.2

2
Charanjit Singh

Je sais que c'est une vieille question, mais j'ai pensé que cela aiderait toute personne confrontée à ce problème. Nous avons récemment rencontré la même erreur lorsque nous avons déplacé notre application basée sur ASP.NET WebAPI vers AWS. Il s'est avéré que l'équilibreur de charge (ALB) avait un délai d'attente d'une minute, ce qui signifie que si une API prend plus d'une minute, ALB annulait la demande et étrangement Chrome donne l'erreur liée à CORS . Dans IIS journaux HTTPERR, une telle demande était marquée comme Request_Cancelled. Étant donné que l'une de nos API prenait plus d'une minute, nous avons dû modifier la configuration du délai d'expiration dans l'ALB et les choses ont commencé à fonctionner correctement. ! C'est un mystère pourquoi Chrome l'appelle CORS!

Allez simplement dans le fichier web.config et collez ci-dessous le code sous

system.webServer

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol> 
0