Connexion à MySql impossible depuis angular 9
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:
Citation:
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.
Coté Angular, j'ai:
- contract.model.ts
Code:
1
2
3
4
5
| export class carinputdata {
id: number;
numero: string = '';
marque: string = '';
} |
- database.php
Code:
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:
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:
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:
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
