web-dev-qa-db-ja.com

ヘッダーにトークンを含むリクエストを取得する

アドレス ' http：// localhost：8080/clients 'でフェッチ要求を行っているときに、ヘッダーにトークンを含めるための助けが必要です。

現在、「HTTP 403 Forbidden」というメッセージが表示されています。

認証トークン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

fetch()では、no-corsモードが有効になっている場合、Authorizationヘッダーを送信できません。

no-cors —メソッドがHEAD、GET、またはPOST以外にならないようにし、ヘッダーが単純なヘッダー以外にならないようにします。

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

単純なヘッダーとは何ですか？

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Typeとその値は、抽出されると、application/x-www-form-urlencoded、multipart/form-data、またはtext/plainのMIMEタイプ（パラメーターを無視）になります

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

したがって、問題は次の行にあります。

mode: 'no-cors',

フェッチリクエストからドロップして、通常どおりAuthorizationヘッダーを追加します。

const myHeaders = new Headers();

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

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

それが役に立てば幸い ：）

5
Nimeshka Srimal

まあこれはあなたが必要なものです：

 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

リクエストにヘッダーを設定できるメソッドは複数あります。ドキュメント here を確認してください。

更新されたコードは次のとおりです。

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