[Angular 2] Accès API REST sécurisé et problème de CORS
Bonjour,
j'ai un soucis avec CORS apparemment et je n'arrive pas à comprendre.
Le serveur est une API REST sécurisé via JWT Token.
à savoir :
- via postman sur chrome, je n'ai aucun soucis. j'obtiens le token et j'accède aux données via le token
- sous Angular 2, j'obtiens le token mais pas moyen d'avoir les données.
j'ai donc cette erreur sur la console :
sous firefox, cette erreur :
Citation:
"NetworkError: 405 Method Not Allowed - http://jwt-api-restxxxxxx/api/produits"
Blocage d’une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur
http://jwt-api-restxxxxx/api/produits. (Raison : échec du canal de pré-vérification des requêtes CORS.
serveur API REST :
dans le .htaccess j'ai bien mis les autorisations : (serveur apache)
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <IfModule mod_rewrite.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
RewriteRule ^ - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ web/$1 [QSA,L]
</IfModule> |
le code sous Angular :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| getProtected() {
let url = `http://jwt-api-restxxxxxx/api/produits`;
let headers = new Headers({ 'Content-Type': 'application/json' });
headers.append("Authorization", `JWT ${jwt}`); // après vérification, le token est bien inséré !
let options: RequestOptions = new RequestOptions({method: RequestMethod.Get, headers: headers });
this.http.get(`${url}`, options)
.map((response: Response) => response.json())
.subscribe(
(data) => {
console.log('Got protected resource: msg: ' + JSON.stringify(data) );
},
(error) => {
console.log(`Protected request failed: ${error}`);
}
);
} |
une idée ?