[javascript/ajax] GETリクエストでリクエストボディに値を含めたい

Question

このようにするとクエリストリングで?name=John&time=2pmと値がURLにくっついてリクエストされると思います。

$.get("test.php", { name: "John", time: "2pm" } );

今回リクエストパラメータがかなり大きくリクエストボディに値を含めたいです。
POSTリクエストにすればいいのですが、事情でGETリクエストを使わないといけません。

PHPで同様のことをやる方法はあるようなのですが、javascriptで実現する方法がわかりません。
cURLでbody付きのGETリクエスト

どなたか教えていただけないでしょうか？

[追記]
kei344さんに教えていただいたfetchでGETを使うとうまくいかないようです。

var url = '/hoge/';
var data = {large_param: large_param};
fetch(url, {
    method: 'GET',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    // do something
}).catch(function (error) {
    console.log(error);
});

TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

Comments

[x_x]

サーバー側で受け取れることは確認済みなのでしょうか？

[tomoyuki123]

はい、POSTの場合は確認しました。

[yambejp]

長くてもパラメーター渡しをすればいいような気がしますが
なにかまずい理由でもあるのでしょうか？
（昔のIEには確かに長さの上限がありましたけど）

[tomoyuki123]

AWSに制限があるようで長いURLだとERR_CONNECTION_CLOSEDと言われてしまっています。
https://yomon.hatenablog.com/entry/2017/08/25/012347

[yambejp]

その場合サーバー側の制限となると、ご提示されているPHPで
やる方法で本当につながりますか？
むしろ何をやっても無駄な可能性はありますが・・・

[tomoyuki123]

提示しているPHPは適当な例です。（実際これに近いものでリクエストしていますが）
ajaxでPOSTでリクエストボディに値を入れた状態でリクエストを送ると正常に動きます。

[yambejp]

いやそうではなく、サーバー側がGETの総量を規制しているなら
body的な手段をしても無駄ではないか？ということです
phpなどでajaxでは送れないデータがほんとに送れるなら
やりようはあるかもしれませんけど、phpで引っかかるなら
そもそも命題じたい解決方法がありません

[tomoyuki123]

そういうことなんですね。
URLとヘッダは16KBまでとのことだったので、リクエストボディに値を含めれば解決かと思っていました。

[x_x]

> はい、POSTの場合は確認しました。
GET で body が取れるのか確認しなければ意味ないですが。
取得できるかどうかはサーバー依存のようですよ？
ここが解決しなければいくらクライアントで送れるように考えても仕方ありません

Answer 1

仕様上、GET 時の body は null に設定されます。
https://xhr.spec.whatwg.org/#the-send()-method

If the request method is GET or HEAD, set body to null.

生の XHR で実際に送れませんでしたので、ラッパーに過ぎない jQuery では当然送れません。
もしかしたら昔の IE なら送れる可能性もあるかもしれませんが、期待しないほうがいいでしょう。

Comments

[x_x]

残るは Cookie ですか？
POST にできればいいんですが

[tomoyuki123]

みなさまありがとうございました。
とりあえずAPIをPOSTにしていただいたので掲題の件は解決しました。

Answer 2

Fetch なら送れそうな気がします。

【Fetch を使う - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

【fetch documentation】
https://github.github.io/fetch/#options

Comments

[x_x]

Chromeなら "TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body."
Firefoxなら "TypeError: HEAD or GET Request cannot have a body."
となりいずれも失敗します。
手段があるのでしょうか？

[tomoyuki123]

ありがとうございます。
ただ私も試したのですがx_xさんと同じエラーメッセージが出ました。

[kei344]

To: x_xさん
いえ、試していませんのでわかりません。「できない」と書かれていないようだったので「もしかしたら」程度で回答しています。