web-dev-qa-db-ja.com

Fetch APiを使用するときにリクエストヘッダーのコンテンツタイプを設定する方法

リクエストを送信するためにnpm 'isomorphic-fetch'を使用しています。私が経験している問題は、リクエストヘッダーのコンテンツタイプを設定できないことです。

Content typeをapplication/jsonに設定しましたが、リクエストヘッダーはtext/plainに設定されています。

import 'isomorphic-fetch';

  sendRequest(url, method, body) {
    const options = {
      method: method,
      headers:{'content-type': 'application/json'},
      mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
  }

ブラウザでリクエストを調べると、コンテンツタイプはoです。

content-type:text/plain;charset=UTF-8

このプロパティを設定できない理由を説明できますか？

node.jsrequest-headersfetch-apinodeapiisomorphic-fetch-api
39
user1526912

次の記事を読んだ後、答えを見つけました。

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

ガード

ヘッダーは要求で送信され、応答で受信され、変更可能な情報と変更可能な情報についてさまざまな制限があるため、ヘッダーオブジェクトにはガードプロパティがあります。これはWebには公開されませんが、ヘッダーオブジェクトで許可される突然変異操作に影響します。

可能なガード値は次のとおりです。

  • none：デフォルト。
  • request：リクエストから取得したヘッダーオブジェクトのガード（Request.headers）。
  • request-no-cors：Request.modeno-corsで作成されたリクエストから取得したヘッダーオブジェクトのガード。
  • response：応答から取得したヘッダーのガード（Response.headers）。
  • immutable：主にServiceWorkersに使用されます。ヘッダーオブジェクトを読み取り専用でレンダリングします。

注：request保護されたヘッダーのContent-Lengthヘッダーを追加または設定することはできません。同様に、Set-Cookieを応答ヘッダーに挿入することは許可されていません。ServiceWorkersは、合成された応答を介してCookieを設定することは許可されていません。

オプションモードプロパティがno-corsに設定されている場合、要求ヘッダーの値は不変です。

代わりに、modeプロパティをcorsに設定します。

24
user1526912

フェッチヘッダーオブジェクトを作成する必要があります。

sendRequest(url, method, body) {
    const options = {
        method: method,
        headers: new Headers({'content-type': 'application/json'}),
        mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
}
21
RTS