Acces Control Allow Header

Bonjour,

Sur mon projet angular, j'ai crée une api en PHP natif. Tous mes fichiers PHP sont construit de la même manière. Mais lors de la lecture de certains fichier j'ai cette erreur qui resort.

Citation:

Access to XMLHttpRequest at 'http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php' from origin 'http://localhost:4203' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Voici le code de mon fichier 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
29
30
31
<?php
header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
header("Access-Control-Allow-Credentials", "true");
header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
 
 
include_once("../../config/Database.php");
include_once "../../models/Partner.php";
 
$db = new Database();
$conn = $db->connect();
$partner = new Partner($conn);
 
$decodedData = json_decode(file_get_contents("php://input"));
$partner->usernamePartner = $decodedData->usernamePartner;
$password = htmlspecialchars($decodedData->password);
 
$partnerExists = $partner->searchPartnerByUsername($partner);
 
//Si un partner existe avec cet username et que le password matche
if (!empty($partnerExists)) {
	if (password_verify($password, $partnerExists['mixedPassword'])) {
		echo json_encode($partnerExists);
	} else {
		echo json_encode('Le mot de passe est erroné');
	}
} else {
	echo json_encode('Le partnenaire n\'existe pas');
}

et voici le code de mon service angular auth.service

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { Injectable } from '@angular/core';
import { User } from './user';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
 
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  endpoint: string = 'http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php';
  headers = new HttpHeaders().set('Content-Type', 'application/json');
  currentUser = {};
 
  constructor(
    private http: HttpClient,
    public router: Router
  ) {
  }
 
  // Sign-in
  signIn(user: User) {
    return this.http.post<any>(`${this.endpoint}`, user)
      .subscribe((res: any) => {
        localStorage.setItem('access_token', res.token)
        this.getUserProfile(res._id).subscribe((res) => {
          this.currentUser = res;
          this.router.navigate(['user-profile/' + res.msg._id]);
        })
      })
  }
 
  getToken() {
    return localStorage.getItem('access_token');
  }
 
  get isLoggedIn(): boolean {
    let authToken = localStorage.getItem('access_token');
    return (authToken !== null) ? true : false;
  }
 
  doLogout() {
    let removeToken = localStorage.removeItem('access_token');
    if (removeToken == null) {
      this.router.navigate(['log-in']);
    }
  }
  // User profile
  getUserProfile(id): Observable<any> {
    let api = `http://localhost:8888/MoutteCAPI/backend/api/partner/listPartner.php?idPartner=${id}`;
    return this.http.get(api, { headers: this.headers }).pipe(
      map((res: Response) => {
        return res || {}
      }),
      catchError(this.handleError)
    )
  }
 
  // Error
  handleError(error: HttpErrorResponse) {
    let msg = '';
    if (error.error instanceof ErrorEvent) {
      // client-side error
      msg = error.error.message;
    } else {
      // server-side error
      msg = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(msg);
  }
}

le code de authconfig.interceptor.ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler } from "@angular/common/http";
import { AuthService } from "./auth.service";
 
@Injectable()
 
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) { }
 
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const authToken = this.authService.getToken();
        req = req.clone({
            setHeaders: {
                Authorization: "Bearer " + authToken
            }
        });
        return next.handle(req);
    }
}

et celui de mon component signin.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
27
28
29
30
31
32
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from "@angular/forms";
import { AuthService } from './../../shared/auth.service';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {
 
  signinForm: FormGroup;
 
  constructor(
    public fb: FormBuilder,
    public authService: AuthService,
    public router: Router
  ) {
    this.signinForm = this.fb.group({
      usernamePartner: [''],
      password: ['']
    })
  }
 
  ngOnInit() { }
 
  loginUser() {
    this.authService.signIn(this.signinForm.value)
  }
 
}

Qu'est ce que je dois faire pour que cela fonction ?