Discussion :

[thorgal1612]

Bonjour,

De puis le front-end, j'appelle une API du backend http://localhost:8000/MonApp/API/societes mais j'ai le message suivant

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:8000/MonApp/API/societes. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

J'ai modifier l'appel du WS comme ceci (en ajoutant un Headers)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const headers = new HttpHeaders()
            .set("Access-Control-Allow-Origin", "*");
 
 
@Injectable()
export class ApiService {
  constructor(
    private http: HttpClient
  ) {}
 
 
 
 
private formatErrors(error: any) {
    return new ErrorObservable(error.error);
}
 
get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.http.get(`${environment.api_url}${path}`,{headers})
      .pipe(catchError(this.formatErrors));
}
 
 
 
}

Mais j'ai toujours le message d'avertissement.

Merci pour votre aide

[Marco46]

TLDR :

- ce n'est pas du à ton code ni à ton application (en dehors du fait que tu appelles une API qui n'est pas sur le même domaine que le serveur qui sert ton front ce qui est normal)
- le problème se règle côté serveur, pas côté client

Ton problème est du au mécanisme CORS (Cross-Origin Resource Sharing) implémenté dans les navigateurs modernes. Du fait de la Same-origin policy, les navigateurs empêchent les pages webs d'attaquer via XMLHttpRequest des domaines différents. Donc si ton port n'est pas le même, ça suffit à entrainer un rejet de la requête.

Sur le serveur que tu souhaites atteindre depuis ton appli front, il est nécessaire d'effectuer de la config (réponse aux requêtes OPTIONS du navigateur et ajout de headers http sur les autres requêtes) qui dira au navigateur qu'il est autorisé à exécuter ces requêtes.

Pour avoir tous les détails ces sites peuvent être utiles :

- https://enable-cors.org/
- https://developer.mozilla.org/en-US/...access_control
- https://developer.mozilla.org/en-US/...Access_Control

Bonne lecture !

[thorgal1612]

Merci, en effet j'ai gérer tout ça dans le back end et ça passe.


J'ai encore une question. Je débute avec angular et j'ai trouvé un exemple d'application https://github.com/gothinkster/angul...ld-example-app

Dans la définition des services, il y a ceci :

Code :

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

1
2
3
4
getAll(slug): Observable<Comment[]> {
    return this.apiService.get(`/articles/${slug}/comments`)
      .pipe(map(data => data.comments));
}

Je ne comprends pas à quoi sert le pipe.

[Marco46]

Faut lire la doc. C'est pas du Angular c'est du RxJS. Cf La doc RxJS, les fonctions de HttpClient retournent des Observable .