Discussion :

[ricobye]

Bonjour,

Je ne suis pas un expert. Je suis sur Angular 9 et utilise EasyPHP comme server PHP et MySql. J'ai lancé EasyPhp et controlé le contenu de ma table à lire. Tout marche bien. Mais lorsque je tente de me connecter à partir de mon application angular, impossible de me connecter à ma base de donnée. Lorsque je lance "http://localhost:4200/gestcontract", J'ai les messages d'erreurs suivants:

Access to XMLHttpRequest at 'http://localhost:8080/api/read.php' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

zone-evergreen.js:2845
GET http://localhost:8080/api/read.php net::ERR_FAILED

Coté Angular, j'ai:

- contract.model.ts

Code :

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

1
2
3
4
5
export class carinputdata {
    id: number;
    numero: string = '';
    marque: string = '';
}

- database.php

Code php :

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
26
27
28
<?php
 
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
 
// db credentials
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'mabasededonnee');
 
// Connect with the database.
function connect()
{
  $connect = mysqli_connect(DB_HOST ,DB_USER ,DB_PASS ,DB_NAME);
 
  if (mysqli_connect_errno($connect)) {
    die("Failed to connect:" . mysqli_connect_error());
  }
 
  mysqli_set_charset($connect, "utf8");
 
  return $connect;
}
 
$con = connect();
?>

- read.php

Code php :

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
26
27
<?php
 
 * Returns the list of policies.
 *
require 'database.php';
 
$carinput = [];
$sql = "SELECT id, numero, marque FROM carinputdata";
 
if($result = mysqli_query($con,$sql))
{
  $i = 0;
  while($row = mysqli_fetch_assoc($result))
  {
    $carinput[$i]['id']    = $row['id'];
    $carinput[$i]['numero'] = $row['numero'];
    $carinput[$i]['marque'] = $row['marque'];
    $i++;
  }
 
  echo json_encode($carinputdata);
}
else
{
  http_response_code(404);
}
?>

Les fichiers PHP sont dans un repertoire /api/ que j'ai mis au même niveau que /app/
J'utilise un service pour la connexion

-connect.service.ts

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
26
27
28
29
30
31
32
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
 
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
 
import { carinputdata } from '../models/contract.model';
 
 
@Injectable({
  providedIn: 'root'
})
 
export class ConnectService {
    //PHP_API_SERVER = '//localhost:4200';
    PHP_API_SERVER = '//localhost:8080';
    carinputdata: carinputdata[];
 
    constructor(private HttpClient: HttpClient) { }
 
    readPolicies(): Observable<carinputdata[]>{
        return this.HttpClient.get<carinputdata[]>(`${this.PHP_API_SERVER}/api/read.php`);
    }
 
    private handleError(error: HttpErrorResponse) {
        console.log(error);
 
        // return an observable with a user friendly message
        return throwError('Error! something went wrong.');
        }
 
}

Le composant qui fait appel à mon service est le suivant:

-gestcontract.component.ts

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
26
import { Component, OnInit } from '@angular/core';
import { ConnectService }     from '../../../mdpublic/mdhome/services/connect.service';
import { carinputdata } from '../../../mdpublic/mdhome/models/contract.model';
 
 
@Component({
  selector: 'app-gestcontract',
  templateUrl: './gestcontract.component.html',
  styleUrls: ['./gestcontract.component.scss']  
})
export class GestcontractComponent implements OnInit {
 
  carinputdata: carinputdata[];
  error = '';
  success = '';
 
  constructor(private ConnectService: ConnectService) { }
 
  ngOnInit() {
 
    this.ConnectService.readPolicies().subscribe((carinputdata: carinputdata[])=>{
      this.carinputdata = carinputdata;
      console.log(this.carinputdata);
    })
  }
}

Je ne comprends vraiment pas l'erreur et malgré mes recherches je suis au point mort. J'ai certainement une erreur dans l'un de mes codes mais où exactement, je ne sais pas.
J'aurais vraiment besoin de regards externes. Pourriez-vous me donner un coup de main s'il vous plait?

Cordialement

[dukoid]

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

c'est un problème qui n'a rien à voir avec Angular, c'est une sécurité du navigateur qui verifie : 'Access-Control-Allow-Origin' dans le header de chaque requête.
si il ne voit pas : Access-Control-Allow-Origin alors il bloque la requete

tu as d'un coté le client (app Angular) et on serveur (php)

ton serveur PHP doit mettre dans le header: un 'Access-Control-Allow-Origin' pour dire "j'autorise l'app. Angular à communiquer avec moi"
le navigateur voyant ça, il ne le bloque plus.

donc le but, tu dois faire le necessaire coté serveur :
tu as 2 solution:
Access-Control-Allow-Origin: * // * veut dire: je m’en fou de la sécurité, je communique avec tout le monde
ou
Access-Control-Allow-Origin: https:\\...url-de-app-angular....




il faut rechercher sur google comment faire en PHP pour le CORS

[ricobye]

Merci beaucoup. Je me suis concentré coté backend et j'ai trouvé l'erreur. Ça n'avait rien avoir avec le frontend... Merci dukoid;