Problème Headers sur un fetch

Gilbert
Javascript

Bonjour guys,

J'ai un problème "d'authorization" dans le header d'une requête http via fetch de javascript. :/ 

fetch('https://api.exemple.com/fr/path/1', {
mode: 'no-cors',
method:'GET',
headers: {
'Accept': '*/*',
'Authorization': 'Basic cHJlc3RhdGFpcmVAYm5ic2l0dGVyLmNvbToxMjM0NTY=',
}
})
.then(function(responses) {
console.log(responses);
}).catch(function(error) {
console.error('request failed : ', error)
})

Vous trouverez un screen du retour de ma requête.

J'ai l'impression qu'il ne prend pas mon header. :/

Quelqu'un aurait-il une solution ?

Gilbert

14 réponses

Gilbert
Auteur
Réponse acceptée

Hello, j'ai résolu le problème.

j'ai inscrit ces lignes la dans le .htaccess de mon API

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, Authorization"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

maintenant mon fetch et mes requête ajax fonctionne bien.

Merci pour l'aide.

à bientôt
Gilbert

nico41

Même en clickant sur view source à coté de Request Headers ?
Ta requete passe, tu as un code 200 , si tu n'étais pas autorisé tu devrais avoir un code 401 ou 403, me trompe-je ?

Gilbert
Auteur

Oui même dans le view source.

En gros ma requête passe bien mais je ne récupère pas un bon résultat.
Voilà ma réponse

J'ai test la même url dans une extention chrome "API rest client".
il me retourne le bon tableau json. 

{
  "error": false
  "user": {
    "user_id": "1"
    "name": "Gilbert"
    "firstname": "Xavier"
    "email": "email@email.com"
    "companyname": "Test (test)"
  }
}
nico41

qu'y a t il dans le Response.body ( si tu deplies body: (...) ) dans ta console ?

Gilbert
Auteur 
Response {type: "opaque", url: "", status: 0, ok: false, statusText: ""…}
body:null
bodyUsed:false
nico41

Et comme ça ?

var myHeaders = new Headers();
myHeaders.append('Accept', '*/*');
myHeaders.append('Authorization', 'Basic cHJlc3RhdGFpcmVAYm5ic2l0dGVyLmNvbToxMjM0NTY=');

fetch('https://api.exemple.com/fr/path/1', {
        mode: 'no-cors',
        method:'GET',
        headers: myHeaders
    }
)
.then(function(responses) {
    console.log(responses);
})
.catch(function(error) {
    console.error('request failed : ', error)
})
Gilbert
Auteur

:/
Exactement la même réponse.

C'est peut être un problème au niveau de l'API ? Pourtant via le REST client ça fonctionne bien.

Dans les logs d'access de l'API j'ai :

avec REST client :
78.203.253.110 - email@email.com [08/Apr/2016:15:51:13 +0200] "GET /fr/path/1 HTTP/1.1" 200 3669 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36"

avec mon fetch js :
109.190.189.40 - - [08/Apr/2016:16:14:09 +0200] "GET /fr/path/1 HTTP/1.1" 200 772 "http://localhost:8080/users" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36"

comme tu peux le voir il ne récupère pas l'username

nico41

tests :
'mode' avec : cors, no-cors, same-origin
ajout de 'credentials' , valeurs possibles : omit, same-origin, include

???

Gilbert
Auteur

Je viens de faire les tests :
mode: cors et same-origin ne fonctionne pas. Les deux me retour une erreur comme celle ci-dessous.

Fetch API cannot load https://api.exemple.com/fr/path/1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

j'ai ajouté credentials: avec omit, same-origin, include. J'ai 2 nouveaux champs qui sont apparu dans "Request Headers" . Le champs Cookie et Pragma.

Au niveau du console.log(responses);
il me retour toujours la même chose.

nico41

j'ai l'impresion que tu ne peux pas faire d'appel avec fetch (javascript et CORS) sur un autre domaine avec en plus une authorization. Si tu as la main sur le serveur de ton api peut être peux tu modifier les configs et ajouter les headers qui vont bien.
par exemple pour nginx voir cette page
sinon je séche, désolé

Gilbert
Auteur

Ok ça marche.
merci pour l'aide.

nico41

que ton serveur renvoie :
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization

peut-être tu pourra alors utiliser fecth avec cors + Authorization

Gilbert
Auteur

Quand je suis en mode: 'cors'
dans mon Resquest Headers j'ai ceci :

Access-Control-Request-Headers: accept, authorization
Access-Control-Request-Method: GET

par contre j'ai tjs la même erreur. dans ma console js

nico41

...
utilises la bonne vieille methode en Ajax avec jquery en denier recours plutot que fetch ...
...