質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

fetchAPIでpostリクエストを送ろうとしてもgetリクエストになる

arch-herobrine
arch-herobrine

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

1クリップ

390閲覧

投稿2022/08/27 15:36

編集2022/08/28 01:33

win10 Chrome最新版

javascript

1(function(){ 2var target = window.prompt('対象のユザネ',''); 3var comment = window.prompt('内容',''); 4var ddd = "https://scratch.mit.edu/site-api/comments/user/9999kakeru9999/add/"; 5const ccc = ddd.replace('9999kakeru9999',target); 6const aaa = '{ "headers": { "accept": "text/html, */*; q=0.01", "accept-language": "ja,en-US;q=0.9,en;q=0.8", "content-type": "application/x-www-form-urlencoded; charset=UTF-8", "sec-ch-ua": "\"Chromium\";v=\"104\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"104\"", "sec-ch-ua-mobile": "?0", "sec-ch-ua-platform": "\"Windows\"", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "same-origin", "x-csrftoken": "iUw3prhmvwyWlJFSmSuN2fEnt3GMzWA0", "x-requested-with": "XMLHttpRequest" }, "referrer": "https://scratch.mit.edu/users/9999kakeru9999/", "referrerPolicy": "strict-origin-when-cross-origin", "body": JSON.stringify({\"content\":\"test\",\"parent_id\":\"\",\"commentee_id\":\"\"}), "method": "POST", "mode": "cors", "credentials": "include" }'; 7var bbb = aaa.replace('9999kakeru9999',target); 8const init = Object(bbb.replace("test",comment)); 9fetch(ccc,init)})()

fetchのpostリクエストを上のコードで送ろうとしてもgetリクエストになってしまいます。誰か原因わかる方いらっしゃったら教えてください。よろしくお願いいたします。

補足:横に長いのでコピペ推奨

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/08/27 15:37依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

SurferOnWww

2022/08/29 01:51

質問者さん、その後無言ですが、追加の回答をしたのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいは返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。
arch-herobrine

2022/08/29 05:46

すいません、家で色々あって閲覧できていませんでした。申し訳ございません。

回答1

0

ベストアンサー

質問のコードには method: "POST" の設定が見当たりませんが?

サンプル (getData と getData2 の 2 案書いてますが結果は同じです)

<script type="text/javascript"> function getData() { fetch("handler2.ashx", { method: "POST" }) .then(response => response.json()) .then(data => console.log(data)) } async function getData2() { const response = await fetch("handler2.ashx", { method: "POST" }); const data = await response.json(); console.log(data); } window.onload = async function () { getData(); await getData2(); } </script>

【追記】

下のコメント欄の 2022/08/28 12:58 の私のコメントで「あとで回答欄に追記しておきます」と書いた件です。

ブラウザの「fetchとしてコピー」でとったやつを変数に分解して入れただけです

・・・とのことですので、こちらの環境でそれをやってみましたが、そのままコピーして同じ結果になります。

まず、上に書いたサンプルを少し変更して要求ヘッダに Content-Type: application/json を追加しホームデータとして JSON 文字列 {"answer":42} を送信するようにして実行し、Chrome 104.0.5112.102 のディベロッパーツールの Copy as fetch でスクリプトを取得します。

取得したスクリプトをそのままコピペしてもう一つ fetch するメソッドを作り、両方一緒に実行してみました。

以下がそのコードです。getData() が元になるもの、getData3() が Copy as fetch で取得したスクリプトをベースに作ったものです。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function getData() { fetch("handler2.ashx", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ answer: 42 }) }) .then(response => response.json()) .then(data => console.log(data)) } function getData3() { fetch("https://localhost:44331/handler2.ashx", { "headers": { "accept": "*/*", "accept-language": "ja,en-US;q=0.9,en;q=0.8,de;q=0.7", "content-type": "application/json", "sec-ch-ua": "\"Chromium\";v=\"104\", \" Not A;Brand\";v=\"99\", \"Google Chrome\";v=\"104\"", "sec-ch-ua-mobile": "?0", "sec-ch-ua-platform": "\"Windows\"", "sec-fetch-dest": "empty", "sec-fetch-mode": "cors", "sec-fetch-site": "same-origin" }, "referrer": "https://localhost:44331/WebForm9", "referrerPolicy": "strict-origin-when-cross-origin", "body": "{\"answer\":42}", "method": "POST", "mode": "cors", "credentials": "omit" }) .then(response => response.json()) .then(data => console.log(data)) } window.onload = function () { getData(); getData3(); } </script> </head> <body> </body> </html>

上記のコードを実行して Fiddler で要求・応答をキャプチャすると以下のようになっています。

getData()

イメージ説明

getData3()

イメージ説明

要求ヘッダの中の各項目の順番が少し違うだけで同じ内容になっています。もちろん期待通りの結果も得られます。

このサンプルでは返ってくる JSON 文字列は以下の通りですが、

[ { "id": 1, "name": "aaa" }, { "id": 2, "name": "bbb" }, { "id": 3, "name": "ccc" } ]

結果は期待通りになります。

イメージ説明

質問者さんが Copy as fetch で使ったコピー元がちゃんと POST 要求になっていて期待した応答が返ってきているなら、「変数に分解」するときに何か間違えているということはないですか?

投稿2022/08/27 22:19

編集2022/08/28 06:31
SurferOnWww

総合スコア17335

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

arch-herobrine

2022/08/28 01:30

すいません、ブックマークレットなのですが...あと、変数内ですが"methot":"POST"は書いてあります。
SurferOnWww

2022/08/28 01:41

> 変数内ですが"methot":"POST"は書いてあります。 それは要求ヘッダに含まれるように設定しているのでは? そうではなくて、fetch の第 2 引数の連想配列の中に { method: "POST" } を含める必要がありますが、質問のコードはそうなってますか?
arch-herobrine

2022/08/28 03:11

ブラウザの「fetchとしてコピー」でとったやつを変数に分解して入れただけです
SurferOnWww

2022/08/28 03:58

> ブラウザの「fetchとしてコピー」でとったやつを変数に分解して入れただけです コピー元がちゃんと POST で期待した応答が返ってきているなら、「変数に分解」するときに何か間違えているということはないですか? こちらの環境でやってみましたが、そのままコピーして同じ結果になります。あとで回答欄に追記しておきます。
arch-herobrine

2022/08/28 04:18

initまるごと変数に代入したはずです。
SurferOnWww

2022/08/28 07:15 編集

回答欄の追加を見てください。「変数に分解して入れた」ときに何か間違えているとしか思えません。
arch-herobrine

2022/08/29 05:44

もう一度調べてみたら解決出来ました。無駄な時間使わせてしまって申し訳ありません。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。