Acces Control Allow Header

**angie13003** · 22/05/2021, 19h42

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.

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 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
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 TypeScript :

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
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 TypeScript :

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
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 TypeScript :

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 { 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 sur ce fichier ? Sachant que tous mes fichiers PHP ont la même entête et c'est le seul fichier qui crée cette erreur.

**mathieu** · 23/05/2021, 07h28

regardez les entêtes des requêtes et des réponses dans la console de développement de votre navigateur, onglet réseau.

**angie13003** · 23/05/2021, 10h25

Bonjour,

Voici les erreur de ma console

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

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php", ok: false, …}
error: ProgressEvent
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
defaultPrevented: false
eventPhase: 0
isTrusted: true
lengthComputable: false
loaded: 0
path: []
returnValue: true
srcElement: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
target: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
timeStamp: 21449.205000011716
total: 0
type: "error"
__proto__: ProgressEvent
headers: HttpHeaders
headers: Map(0)
[[Entries]]
No properties
size: (...)
__proto__: Map
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure response for http://localhost:8888/MoutteCAPI/bac...inPartner.php: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://localhost:8888/MoutteCAPI/backend/api/partner/loginPartner.php"
__proto__: HttpResponseBase

**houd.ini** · 23/05/2021, 17h05

Bonjour,

J'ai l'impression que l'utilisation de header est incorrecte (voir la doc).
Tu voulais sûrement faire ceci :

Code :

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

1
2
3
4
5
6
<?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");

**angie13003** · 28/05/2021, 19h01

Bonjour,

effectivement, en ayant lu le lien de la doc que vous m'avez envoyer j'ai fait plein de petite erreur. j'ai donc modifié mon fichier de cette manière.

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
<?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: POST");
 
 
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');
}

Après modifier j'ai encore une erreur CORS.

Access to XMLHttpRequest at 'http://localhost:8888/MoutteCAPI/backend/api/partner/login.php' from origin 'http://localhost:4206' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:8888/MoutteCAPI/backend/api/partner/login.php", ok: false, …}
error: ProgressEvent
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/login.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
defaultPrevented: false
eventPhase: 0
isTrusted: true
lengthComputable: false
loaded: 0
path: []
returnValue: true
srcElement: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/login.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
target: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "http://localhost:8888/MoutteCAPI/backend/api/partner/login.php", __zone_symbol__loadfalse: Array(1), __zone_symbol__errorfalse: null, __zone_symbol__xhrScheduled: true, …}
timeStamp: 920552.2949999941
total: 0
type: "error"
__proto__: ProgressEvent
headers: HttpHeaders
headers: Map(0) {}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure response for http://localhost:8888/MoutteCAPI/backend/api/partner/login.php: 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: "http://localhost:8888/MoutteCAPI/backend/api/partner/login.php"
__proto__: HttpResponseBase

Est ce que c'est une erreur qui vient encore de mon fichier PHP, ou bien est ce une erreur qui vient de mes fichier angular ?

**angie13003** · 28/05/2021, 21h51

J'ai testé mon fichier PHP sur postman et celui-ci marche très bien.

voici les réponses que j'ai dans mon header

Code :

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

1
2
3
4
5
6
7
8
9
10
11
access-control-allow-credentials →true
access-control-allow-headers →Origin, X-Requested-With, Content-Type, Accept
access-control-allow-methods →PUT, GET, POST, DELETE
access-control-allow-origin →*
connection →Keep-Alive
content-length →558
content-type →application/json; charset=UTF-8
date →Fri, 28 May 2021 19:48:08 GMT
keep-alive →timeout=5, max=100
server →Apache/2.2.34 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.4.2 mod_ssl/2.2.34 OpenSSL/1.0.2o DAV/2 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.11 Perl/v5.24.0
x-powered-by →PHP/7.4.2

je ne comprends vraiment pas le pourquoi j'ai cette erreur CORS lors que je le connecte à mon front

Access to XMLHttpRequest at 'http://localhost:8888/MoutteCAPI/backend/api/partner/login.php' from origin 'http://localhost:4206' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Acces Control Allow Header

PHP & Base de données

Vue hybride

Discussions similaires

Partager

Partager