web-dev-qa-db-ja.com

fetch（）はヘッダーを送信しませんか？

ブラウザからこのようなPOSTリクエストを送信しています：

fetch(serverEndpoint, {
    method: 'POST',
    mode: 'no-cors', // this is to prevent browser from sending 'OPTIONS' method request first
    redirect: 'follow',
    headers: new Headers({
            'Content-Type': 'text/plain',
            'X-My-Custom-Header': 'value-v',
            'Authorization': 'Bearer ' + token,
    }),
    body: companyName
})

リクエストがバックエンドに届くまでに、X-My-Custom-HeaderもAuthorizationヘッダーも含まれていません。

私のバックエンドは、Firebase用のGoogle Cloud関数（基本的にはNode.jsエンドポイントのみ）で、次のようになります。

exports.createCompany = functions.https.onRequest((req, res) => {
    let headers = ['Headers: ']
    for (let header in req.headers) {
        headers.Push(`${header} : ${req.headers[header]}`)
    }
    console.log(headers)
    ...
}

Firebase向けGoogle Cloud機能のコンソールログには、X-My-Custom-HeaderもAuthorizationヘッダーも含まれていません。

なにが問題ですか？

編集1

Chromeの開発ツールを使用して、X-My-Custom-HeaderヘッダーもAuthorizationヘッダーもブラウザーから送信されないことを確認しました...質問は次のとおりです。なぜですか？どうすれば修正できますか？

編集2

私のアプリの詳細：Reactアプリです。サービスワーカーを無効にしました。 Requestを作成し、req.headers.append()を使用して具体的にヘッダーを追加しようとしました。ヘッダーはまだ送信されません。

javascripthttppostcorsfetch-api
52
Rasto

same-Origin policy は、Webページが別のOriginからリソースに送信できるリクエストの種類を制限します。

no-corsmode では、ブラウザは「単純な」リクエストの送信に制限されます。 safelistedメソッド および safelisted headers のみのリクエストです。

AuthorizationやX-My-Custom-Headerなどのヘッダーを持つクロスオリジンリクエストを送信するには、no-corsモードを削除し、プリフライトリクエスト（OPTIONS）をサポートする必要があります。

「単純な」リクエストと「非単純な」リクエストの違いは、歴史的な理由によるものです。 Webページは常にさまざまな手段（フォームの作成や送信など）でクロスオリジンリクエストを実行できるため、Webブラウザーがクロスオリジンリクエストを送信する原則的な手段を導入したとき（ クロスオリジンリソース共有 、またはCORS）、そのような「単純な」リクエストはプリフライトOPTIONSチェックから免除されることが決定されました。

71
Vasiliy Faronov

まず：new Headers(..)の代わりにオブジェクトを使用します：

fetch('www.example.net', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
    'X-My-Custom-Header': 'value-v',
    'Authorization': 'Bearer ' + token,
  }
});

二番目に：知っておくとよい、ヘッダーはfetch !!で小文字になっています!!

番目：no-corsモードは、ヘッダーの使用をこのホワイトリストに制限します。

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Typeおよびその値は（application/x-www-form-urlencoded、multipart/form-data、text/plain）

Content-TypeまたはAuthorizationではなく、X-My-Custom-Headerヘッダーのみが送信される理由です。

15
Damien

これを試してもらえますか？

fetch(serverEndpoint, {  
  credentials: 'include'  
})

参照 https://developers.google.com/web/updates/2015/03/introduction-to-fetch#sending_credentials_with_a_fetch_request

3
Frank R.

1番目：exports.createCompany関数でヘッダーを呼び出すと、小文字のHではなく、大文字のhを持つlet headers = ['Headers: ']があり、エラーが発生する可能性があります。また、ヘッダー内のトークンの後にカンマがありますが、ヘッダーは存在しないはずです。

2番目：反応ネイティブでフェッチリクエストを使用するたびに、header:はnew Headersを必要としません。

これを試してください：fetch(serverEndpoint, { method: 'POST', mode: 'no-cors', redirect: 'follow', headers:{ 'Content-Type': 'text/plain', 'X-My-Custom-Header': 'value-v', 'Authorization': 'Bearer ' + token }, body: companyName })

0
Timmehlkk

私もこれと同じ問題を抱えていました。 javascriptから「no-cors」を削除し、サーバー側のスプリングブートに以下を追加することで解決しました。

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
        protected void configure(HttpSecurity httpSecurity) throws Exception {
             .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

        }
    }
0
Greeshma