Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Expert éminent
    [Débutant] Communication entre client Angular et serveur REST
    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
    On ne jouit bien que de ce qu’on partage.

  2. #2
    Expert éminent
    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...
    On ne jouit bien que de ce qu’on partage.