Discussion :

[StringBuilder]

Bonjour,

Je débute avec TypeScript, et je tente de faire commuiquer mon serveur d'API RESTfull avec mon client Angular.

J'ai donc suivi à la lettre le tutorial d'Angular (Tour of Heroes) au détail près qu'au lieu d'appeler un serveur fake, je tente d'appeler le serveur que j'ai codé en suivant le tuto suivant.

J'ai donc le projet "tsclient" avec le code identique à celui ci : https://angular.io/tutorial/toh-pt6
Et un serveur avec le code suivant : https://medium.com/better-programmin...t-dec8a51e7f8d

Avec une ou deux adaptations :
La classe User côté serveur est remplacée par une classe Product, et je tente de renvoyer lors du GET sur /products la chaîne JSON contenant mes produits :

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
 
    public read(req: Request<import("express-serve-static-core").ParamsDictionary>, res: Response): void {
        res.json([
            { id: 1, name: 'Test 1' },
            { id: 2, name: 'Test 2' },
            { id: 3, name: 'Test 3' },
            { id: 4, name: 'Test 4' },
            { id: 5, name: 'Test 5' },
            { id: 6, name: 'Test 6' },
            { id: 7, name: 'Test 7' },
            { id: 8, name: 'Test 8' },
            { id: 9, name: 'Test 9' },
            { id: 10, name: 'Test 10' }
        ]);
    }

=> Ceci fonctionne si j'ouvre un navigateur avec l'adresse http://192.168.0.23:4000/products

Et côté client, idem, j'ai remplacé les Heroes par des Products.

Pourtant, lorsque je tente d'appeler mon API, j'obtiens une erreur, sans aucun détail, évidement (ça serait trop beau) :

Le service :

Code :

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

1
2
3
4
5
6
7
8
 
  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productsUrl)
      .pipe(
        tap(_ => this.log('fetched products')),
        catchError(this.handleError<IProduct[]>('getProducts', []))
      );
  }

Le handleError :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
 
      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead
 
      // TODO: better job of transforming error for user consumption
      this.log(`${operation} failed: ${error.message}`);
 
      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

Et j'obtiens cette erreur :

ProductService: getProducts failed: Http failure response for http://192.168.0.23:4000/products: 0 Unknown Error

Qu'est-ce qui ne lui va pas ?

Je développe depuis un PC Windows, mais tout est sur une VM Linux depuis un répertoire partagé (samba).

Le serveur est lancé avec la commande :

Code :

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

npm run dev

Et le client :

Code :

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

ng serve --host=0.0.0.0

Je teste depuis le PC sous Windows (donc pas de localhost). 192.168.0.23 est l'IP de la VM Linux

[StringBuilder]

Hmpf, ok, compris... (pas très vite)

L'erreur complète :

Access to XMLHttpRequest at 'http://192.168.0.23:4000/products' from origin 'http://192.168.0.23:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ca va mieux avec...