web-dev-qa-db-fra.com

Demande de récupération avec jeton dans l'en-tête

J'ai besoin d'aide pour inclure le jeton dans l'en-tête lorsque je fais une demande de récupération à l'adresse ' http: // localhost: 8080/clients '.

En ce moment, je reçois ce message "HTTP 403 interdit".

Jeton d'autorisation 1234abcd 

function getAllClients() {
      const myHeaders = new Headers();
      myHeaders.append('Content-Type', 'application/json');

      return fetch('http://localhost:8080/clients', {
        method: 'GET',
        mode: 'no-cors',
        headers: myHeaders,
      })
        .then(response => response.json())
        .then((user) => {
          console.log(user.name);
          console.log(user.location);
        })
        .catch((error) => {
          console.error(error);
        });
    }

    getAllClients();
javascriptfetchfetch-api
3
peronja

Avec fetch(), vous ne pouvez pas envoyer d'en-tête Authorization lorsque le mode no-cors Est activé.

no-cors - Empêche la méthode d'être autre chose que HEAD, GET ou POST, et les en-têtes d'être autre chose que de simples en-têtes.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

Que sont les en-têtes simples?

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type Et dont la valeur, une fois extraite, a un type MIME (en ignorant les paramètres) qui est application/x-www-form-urlencoded, multipart/form-data Ou text/plain

https://fetch.spec.whatwg.org/#simple-header

Votre problème se situe donc dans la ligne suivante:

mode: 'no-cors',

Déposez-le simplement dans la demande de récupération et ajoutez votre en-tête Authorization comme d'habitude.

const myHeaders = new Headers();

myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', '1234abcd');

return fetch('http://localhost:8080/clients/', {
  method: 'GET',
  headers: myHeaders,
})

J'espère que ça aide :)

5
Nimeshka Srimal

Voilà ce dont vous avez besoin:

 function getAllClients() {
  const myHeaders = new Headers();

  /* 
    myHeaders.append('Content-Type', 'application/json'); 
    since it's a get request you don't need to specify your content-type
  */

  myHeaders.append('Authorization', 'Token 1234abcd');

  return fetch('http://localhost:8080/clients', {
    method: 'GET',
    mode: 'no-cors',
    headers: myHeaders,
  })
    .then(response => response.json())
    .then((user) => {
      console.log(user.name);
      console.log(user.location);
    })
    .catch((error) => {
      console.error(error);
    });
}

getAllClients();
1
Fabien Greard

Il existe plusieurs méthodes pour définir l'en-tête dans la demande, vous pouvez consulter la documentation ici .

Voici le code mis à jour:

function getAllClients() {
const myHeaders = new Headers({
    'Content-Type': 'application/json',
    'Authorization': 'your-token'
});

return fetch('http://localhost:8080/clients', {
  method: 'GET',
  headers: myHeaders,
})

.then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on api server!');
    }
  })
  .then(response => {
    console.debug(response);
  }).catch(error => {
    console.error(error);
  });
}

getAllClients();
1
Harshal