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

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

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

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

Q&A

解決済

1回答

641閲覧

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

arch-herobrine

総合スコア2

JavaScript

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

0グッド

1クリップ

投稿2022/08/27 15:36

編集2022/08/29 14:46

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リクエストになってしまいます。誰か原因わかる方いらっしゃったら教えてください。よろしくお願いいたします。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/08/29 01:51

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

2022/08/29 05:46

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

回答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
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

arch-herobrine

2022/08/28 01:30

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

退会済みユーザー

2022/08/28 01:41

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

2022/08/28 03:11

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

退会済みユーザー

2022/08/28 03:58

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

2022/08/28 04:18

initまるごと変数に代入したはずです。
退会済みユーザー

退会済みユーザー

2022/08/28 07:15 編集

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

2022/08/29 05:44

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問