Discussion :

[julleroch]

Bonjour à tous,
après maintes recherches et essais infructueux je me tourne vers vous. Voilà j'ai donc une API (.net core) déployé sur un serveur Azure et en UI j'ai du Angular.
J'essaye donc d'appeler mon api en utilisant HTTPClient. Voici mon code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
get(){
    this.http.get(this.urlApi + 'Users',  {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*'
      })
    }).subscribe(res=>{
      console.log(res)
    });
  }

En appelant la méthode get j'ai cette erreur :
"Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cafeludique.azurewebsites.net/api/Users. Raison : échec de la réponse de pré-vérification des requêtes CORS.
Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cafeludique.azurewebsites.net/api/Users. Raison : échec de la requête CORS."

Comme vous l'avez vu j'ai pourtant bien mit le header Access-Control-Allow-Origin (j'ai aussi essayé en remplaçant * par localhost).

Je préfère poster ici sur le forum angular, car je ne pense pas que ce sois un problème de mon api. J'ai essayé aussi en utilisant la méthode js fetch (c'est pas forcément le plus propre mais je voulais tout essayer ^^' ) et elle a fonctionné ! la méthode get en tout cas. D'ou le fait que je ne pense pas que cela vienne de mon back.

Bien sûr je ne suis pas une experte alors je peux me tromper et j'accepte les conseils !

[dukoid]

ce n'est pas dans l'appel "client" qu'il faut mettre : allow origin
mais plutôt sur le serveur api

donc coté serveur, il faut ajouter :

allow origin * (accepte toutes les requêtes) -> pas recommandé d'un point de vue sécurité (mais pour tester c'est bien)
allow origin: url_de_app_angular (ainsi le navigateur constate que le serveur accepte les requêtes provenant du client)

donc voir, coté .net comment faire ça !

[julleroch]

Merci ! J'ai résolu mon problème
Effectivement j'avais déjà essayé de mettre le header dans mon back, mais bon beh j'ai re-essayer et cette fois ci j'ai utilisé la bonne façon ^^'.
Alors je donne ce que j'ai (même si du coup c'est pas de l'angular) :
J'avais utilisé dans le Startup.cs AddCors(builder=>{ builder.WithOrigins("http://page-angular.exemple");}) et ça n'avait pas fonctionné (non plus avec *).
Cette fois j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
AddCors(o => o.AddPolicy("MyPolicy", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));

et ça fonctionne !