web-dev-qa-db-ja.com

フェッチAPIをモード「no-cors」で使用すると、リクエストヘッダーを設定できません

サービスのエンドポイントをヒットしようとしていますが、サービスはログインサービスです。認証タイプを基本として使用しています。コードは反応していて、フェッチライブラリを使用していますが、リクエストにヘッダーフィールドを設定しても、できません。リクエストの対応するヘッダーの値をネットワークタブに表示しますか？

以下はコードです：

var obj = {
  method: 'GET' ,
  mode : 'no-cors',
  headers: {
      'Access-Control-Request-Headers': 'Authorization',
      'Authorization': 'Basic amFzcGVyYWRtaW46amFzcGVyYWRtaW4=',
      'Content-Type': 'application/json',
      'Origin': ''
  },
  credentials: 'include'
};
fetch('http://myreport:8082/jasperserver/rest/login/', obj ).then(…

ユーザー名とパスワードの入力を求めるポップアップPopup where its asking me for username and password

ネットワークタブからのリクエストとレスポンスの呼び出しRequest and response calls from the network tabs

reactjsreact-nativefetch-api
8
sumit bhanwala

ヘッダーはCORS-safelistedではないため、リクエストに添付できません。

説明：

  1. no-cors要求モードは、ヘッダーオブジェクトのguardプロパティをrequest-no-corsに設定します

  2. name / value （name/value）のペアをヘッダーオブジェクト（ヘッダー）に追加するには、ブラウザーで次の手順を実行する必要があります。

    1. 正規化 値。

    2. Nameが name でない場合、またはvalueが value でない場合は、TypeErrorをスローします。

    3. ガードが「不変」の場合、TypeErrorをスローします。

    4. それ以外の場合、guardが "request"であり、nameが禁止されたヘッダー名である場合、戻ります。

    5. それ以外の場合、guardが"request-no-cors"で、名前/値がCORS-safelisted request-headerでない場合は、戻ります。 ←あなたのシナリオ

    6. それ以外の場合、guardが「応答」であり、nameが禁止された応答ヘッダー名である場合、戻ります。

    7. ヘッダーリストに名前/値を追加します。

  3. CORS-safelisted request-header（大文字と小文字を区別しない）：
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type、ただし値が次のいずれかである場合のみ。
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

フェッチのHeaders class仕様について詳しくは、こちらをご覧ください https://fetch.spec.whatwg.org/#headers-class

14
Dzmitry Bachko