web-dev-qa-db-ja.com

'ReferenceError：ヘッダーは、サーバー側にレンダリングされたReactプロジェクトでヘッダーを使用する場合は定義されていません。

Reactで新しいアプリケーションを設定しています。これをサーバーサイドにレンダリングしたいです。残念ながら ヘッダー を使用することはできません（ - === - ）エラー 'ReferenceError：ヘッダーが定義されていない'を投げ続けることができます。

追加でヘッダーを追加しようとしました。

_import fetch from 'node-fetch';

global.fetch = fetch
global.Headers = fetch.Headers;
_

これは依然としてエラーをスローします。

これは私が現在ヘッダーの実装方法の例です。

_const defaultOptions = {
  method: METHOD,
  headers: new Headers({
    'Content-type': 'application/json',
    'X-Request-ID': new Date().getTime().toString(),
  }),
};
_

それをビルドして始めるために何が行方不明のものを知っていますか？

reactjsfetch-apiserver-side-rendering
6
Chantal

厄介なバグを引き起こす可能性がある場合によっては、SSRでグローバルを使用しないでください。たとえば、1人のユーザーをレンダリングしている間に、もう1つはWebサイトを要求し、最初のユーザーに何らかの要求を実行している間にグローバル変数を変更できます。

フェッチに関して - あなたはこのようなヘッダーを設定することができます：

   fetch('https://google.com', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
        }
     }
   );
 _
4
ewief

nPMパッケージをインストールしてください。

npm install --save form-data
 _

それからそれをインポートします。

var FormData = require('form-data');
 _
1
Tulshi Das

tl; dr短い回答、使用：

const fetch = require("node-fetch");

var myHeaders = new fetch.Headers();

詳細：これは私のエラーだったnpm testを実行している間

var myHeaders = new Headers();
                ^
ReferenceError: Headers is not defined

私は最初の行の答えを見つけましたヘッダーの公式MDNページ : https://developer.mozilla.org/en-us/docs/web/api/headers

フェッチのヘッダインタフェース APIを使用すると、これを試してみました。

old：var myHeaders = new Headers();
[。] 新規：var myHeaders = new fetch.Headers();

1
eaccmk