常連

HTTPのPOSTメソッドでリクエストを投げる際にURLエンコードする必要性はあるのでしょうか。
URLエンコードというのは、もともとヘッダ部のURL部分に2バイト文字や制御文字と紛らわしい文字が入るのを防止するためのものであり、
BODY部には不要ではないかと思いました。

例えばMIME TYPEにapplication/x-www-form-urlencodedが指定されている場合文字列はエンコードして送信されますが、
application/jsonを指定する場合などは、手動でURLエンコーディングするべきでしょうか？

HTTPのPOSTメソッドにおいてリクエストボディをURLエンコードする必要性はあるのでしょうか？

[参考サイト](https://tokkan.net/spring/jsp2.html)
上記のサイトを参考に、検索画面を作るための項目を作成しているのですが、以下のようなエラーが出てしまいました。まだ経験が浅く、色々と調べてみましたが、どのように修正すればいいのかわかりません。

![イメージ説明](ffcfc1d848b53aec6b2641e22ae523b2.png)

POSTがサポートされていないとのことですが、POSTを使うために何か設定が必要なのでしょうか？

エディター上では特にエラーは起きていません。
別画面に渡そうとするとエラーになってしまいます。

###やりたいこと
各項目で入力した内容を別画面(searchConfirm.jsp)で表示させたい。

### TestController.java
```ここに言語を入力
package group.study.dev.sample.test;

import java.util.LinkedHashMap;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class TestController {

	@ModelAttribute("UM")
	public SearchModel init() {
		SearchModel um = new SearchModel();
		um.setTxt("test");
		um.setRdo1("r1");
		um.setRdo2("B");

		return um;
	}

	public void setMap(Model model) {
		LinkedHashMap<String, String> map = new LinkedHashMap<>();
		map.put("A", "その１");
		map.put("B", "その２");
		model.addAttribute("map", map);
	}

	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String loginGet(Model model) {
		init();
		setMap(model);
		return "login";
	}

	@RequestMapping(value = "/searchConfirm", method = RequestMethod.POST)
	public String loginPost(@ModelAttribute("UM") SearchModel searchModel, Model model,
			RedirectAttributes redirectAttributes) {

		System.out.println(searchModel.toString());

		setMap(model);
		/*
		System.out.println("modelに登録されているオブジェクトを全て表示");
		for (Map.Entry<String, Object> e : model.asMap().entrySet()) {
			System.out.println(e);
		}
		*/
		return "searchConfirm";
	}
}
```

### SearchModel.java
```ここに言語を入力
package group.study.dev.sample.test;

public class SearchModel {

	private String txt;
	private String area;
	private String sel1;
	private String sel2;
	private boolean chk1;
	private String[] chk2;
	private String rdo1;
	private String rdo2;
	private String pass;
	private String hdn;

	public String toString() {
		StringBuilder stb = new StringBuilder();

		stb.append("txt:" + txt + System.lineSeparator());
		stb.append("area:" + area + System.lineSeparator());
		stb.append("sel1:" + sel1 + System.lineSeparator());
		stb.append("sel2:" + sel2 + System.lineSeparator());
		stb.append("chk1:" + chk1 + System.lineSeparator());
		if(chk2 == null) {
			System.out.println("NULLです。");
		}else {
			stb.append("chk2:" + chk2.length + System.lineSeparator());
		}
		//stb.append("chk2:" + chk2.length + System.lineSeparator());
		stb.append("rdo1:" + rdo1 + System.lineSeparator());
		stb.append("rdo2:" + rdo2 + System.lineSeparator());
		stb.append("pass:" + pass + System.lineSeparator());
		stb.append("hdn:" + hdn + System.lineSeparator());

		return stb.toString();
	}

	public String getTxt() {
		return txt;
	}

	public void setTxt(String txt) {
		this.txt = txt;
	}

	public String getArea() {
		return area;
	}

	public void setArea(String area) {
		this.area = area;
	}

	public String getSel1() {
		return sel1;
	}

	public void setSel1(String sel1) {
		this.sel1 = sel1;
	}

	public String getSel2() {
		return sel2;
	}

	public void setSel2(String sel2) {
		this.sel2 = sel2;
	}

	public String[] getChk2() {
		return chk2;
	}

	public void setChk2(String[] chk2) {
		this.chk2 = chk2;
	}

	public String getRdo1() {
		return rdo1;
	}

	public void setRdo1(String rdo1) {
		this.rdo1 = rdo1;
	}

	public String getPass() {
		return pass;
	}

	public void setPass(String pass) {
		this.pass = pass;
	}

	public String getHdn() {
		return hdn;
	}

	public void setHdn(String hdn) {
		this.hdn = hdn;
	}

	public boolean isChk1() {
		return chk1;
	}

	public void setChk1(boolean chk1) {
		this.chk1 = chk1;
	}

	public String getRdo2() {
		return rdo2;
	}

	public void setRdo2(String rdo2) {
		this.rdo2 = rdo2;
	}

}


```
### login.jsp
```ここに言語を入力
<%@page import="group.study.dev.sample.test.SearchModel"%>
<%@page import="group.study.dev.sample.test.TestController"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<title>ログイン</title>

<script type="text/javascript">
	//テキスト読み込み時に実行
	document.addEventListener("DOMContentLoaded", function() {

		// form:select で複数選択した場合、選択されなかったため手動で選択。
		// ※Modelで配列、リストにすればできた。「form:selectの追記」を参照
		var ary = [];

<%
	SearchModel model = (SearchModel) request.getAttribute("UM");
	if (model != null && model.getSel2() != null) {
		String[] strs = model.getSel2().split(",");
		for (String str : strs) {
			out.println("ary.push('" + str + "');");
		}
	}
%>

		var obj = document.getElementById("sel2");

		for (var i = 0; i < obj.length; i++) {
			if (ary.indexOf(obj.options[i].value) >= 0) {
				obj.options[i].selected = true;
			}
		}
	}, false);
</script>
</head>
<body>
	<spring:url value="/login" var="url" htmlEscape="true" />
	<form:form action="${url}" method="POST" modelAttribute="UM">

		<form:input path="txt" />
		<hr />
		<form:textarea path="area" />
		<hr />
		<form:select path="sel1" items="${map}" />
		<hr />
		<form:select path="sel2" multiple="true">
			<form:option value="op1">オプション</form:option>
			<form:options items="${map}" />
		</form:select>
		<hr />
		<form:checkbox path="chk1" label="チェック" />
		<hr />
		<form:checkboxes path="chk2" items="${map}" />
		<hr />
		<form:radiobutton path="rdo1" label="ラジオ１" value="r1" />
		<form:radiobutton path="rdo1" label="ラジオ２" value="r2" />
		<hr />
		<form:radiobuttons path="rdo2" items="${map}" />
		<hr />
		<form:password path="pass" />
		<hr />
		<form:hidden path="hdn" />
		<BR />
		<input type="submit" value="テスト" />
		<BR />
		<BR />
	</form:form>
</body>
</html>
```
### searchConfirm.jsp
```ここに言語を入力
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>searchConfirm</title>
</head>
<body>
	<h1>検索結果</h1>
	<c:out value="${txt}"/>

</body>
</html>
```

よろしくお願い致します。

Request method 'POST' not supported. リクエストメソッドがサポートされていません。

## テーマ、知りたいこと

下記経緯にも記述しましたが，PUT や DELETE メソッドを使わない API を設計する理由として，
form タグの method 属性が対応していないこと以外に理由はあるのでしょうか．

真偽はともかく，軽く調べたところだと「Web ブラウザが対応していない」や「セキュリティの問題がある」などの意見が散見されました．
前者については，少なくとも現在有力なブラウザは対応していると思うので，古いないしは限定的な理由なのかなと思います．
後者については PUT および DELETE に認証がないなどという記述が見られました．
(検索の仕方に問題があるのかもしれませんが) そのあたりについて具体的に述べている資料を見つけるに至りませんでした．
また WAF や Proxy で弾かれてしまうからと仰っている人もいましたが，それは結局のところ設定の問題だと思うので知りたい結論ではありませんでした．

改めて知りたいことを整理すると，
PUT および DELETE メソッドにあって，POST メソッドにはない(主にセキュリティの観点での)問題点とは具体的に何なのか
です．

## 経緯

API 設計において，PUT や DELETE を用いず GET および POST のみで設計する人が少なからずいます．
HTML form タグの method 属性が get および post しか対応していないことが由来なのだろうとは思っていましたが，それ以上の理由が存在するのか調べたのがきっかけです．


PUT DELETE のセキュリティ面での懸念について

htmlのstartボタンを押したら今の現在地の緯度と経度をデータベースに保存するようにしたいです。
保存後にそのページと別のページにリダイレクトしたいと考えています。
しかし、うまくいかないので教えてください。

```routes.rb
"hoge/:id" => "hoge#start"
```
```html.slim
input type="button" value="start" onclick="hogehoge(#{@hoge.id})"
```
```hoge.js
function hogehoge(x) {
  if (navigator.geolocation) {
    //現在地取得可能
    navigator.geolocation.getCurrentPosition(
      function(position) {//success
        var data = position.coords;
        var lat = data.latitude;
        var lng = data.longitude;
        $.post({
          url: "/hoge/"+x,
          data: {latitude: lat, longitude: lng},
          dataType: 'json',
          success: function(){
            alert("success")
          },
          error: function(){
            console.log("error")
            console.log(response)
          }
        });
      },
      function() {//error
        var errorInfo = [
        "原因不明のエラーが発生しました…。" ,
        "位置情報の取得が許可されませんでした…。" ,
        "電波状況などで位置情報が取得できませんでした…。" ,
        "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。"
         ];
        var errorNo = error.code;
        var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ] ;
        alert( errorMessage ) ;
      },
      {
        "enableHighAccuracy": true,
        "timeout":10000
      }
    );
  } else {
    //現在地取得不可能
    alert("お使いの端末は現在地が取得出来ません。")
  }
}
```
```hoge_controller.rb
def start
    @hoge = Hoge.find_by(id: params[:id])
    @hoge.longitude = params[:longitude]
    @hoge.latitude = params[:latitude]
    if @hoge.save
      flash[:notice] = "#{@hoge.longitude}#{@hoge.latitude}"
      redirect_to 'hoge/index'
    end
end
```

Ajaxでpostした後に別のページに遷移したい

実現したいことは以下のサイトのブロードキャストメッセージを送るの部分です。
[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#send-multicast-message)

他サイトを参考に以下のようなコードを作成しました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/multicast";

            // Message
            var json = "{ \"type\" : text, \"text\" : \"Hello World\"  }";
            // var content = new StringContent("{ \"your\": \"content\", \"maybe\": \"json\" }");
            // content.Headers.Add("X-SOME-RANDOM", "header-value");

            var request = new HttpRequestMessage(HttpMethod.Get, url);
            // Request Header
            request.Headers.Add("ContentType", "application/json");
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            // Request Body
            request.Headers.Add("to", "userId");
            request.Headers.Add("messages", json);
            var response = await client.SendAsync(request);
```

これを実行するとインターナルサーバーエラーになります。
リクエストヘッダーを設定する箇所は以下のサイトを参考にしました。
[HttpClient でリクエストヘッダを設定する](https://qiita.com/c-yan/items/6e506399675e3cc56732)


リクエストヘッダーをそのまま、リクエストボディに適用した形です。
これだとよろしくないのでしょうか。

追記⓵
リクエストヘッダーとボディを分けるところは完成しましたが、どのようにして
ヘッダーにAuthorizationを設定すればよいでしょうか。現在のコードは以下です。

```C#
            var json = @"{""type"":""text"", ""text"":Hello World}";
            var content = new StringContent(json, Encoding.UTF8, @"application/json");

            using (var client = new HttpClient())
            {
                var response = await client.PostAsync($"http://foo.example.com", content);
            }
```

追記⓶
現在のコードは以下です。ボディとヘッダーを同時に設定できました。
```C#
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

 
            var request = new HttpRequestMessage(HttpMethod.Post, url);
            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);
            var parameters = new Dictionary<string, string>()
            {
                { "messages", "Hello World" },
            };

            request.Content = new StringContent(
                parameters.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);//ここでデバックで停止
```

デバック結果
![イメージ説明](a9298d00b78930b2d35317add26b5d17.png)

値も指定通りになっている気がします。
特にサーバーエラー等は出ていません。

追記⓷
現在、ローカルホストを外部に公開するためにngrokを使用しています。そこでは200Okのレスポンスが返ってきます。
が、fiddlerではエラーになっているようです。
以下がその画面と、現在のコードです。
![イメージ説明](5acf9948e2eb6689d5ef14f13ff76da9.png)

```現在のコード
            // To creat HttpClient
            var client = new HttpClient();

            // Accesstoken
            var accessToken = "token=";

            // URL
            var url = "https://api.line.me/v2/bot/message/broadcast";

            // POST
            var request = new HttpRequestMessage(HttpMethod.Post, url);

            // Request Header
            request.Headers.Add("Authorization", "Bearer " + accessToken);

            var str1 = new Dictionary<string, string>();
            str1.Add("type", "text");
            str1.Add("text", "test test test");

            var str2 = new Dictionary<string, Dictionary<string, string>>();
            str2.Add("messages", str1);

            var json = JsonConvert.SerializeObject(str2);

            request.Content = new StringContent(
                json.ToString(),
                Encoding.UTF8,
                "application/json"
            );

            await client.SendAsync(request);
```

追記④
現在POSTでブロードキャストメッセージを送ると以下のようにFiddlerに表示されます。
```ここに言語を入力
POST https://api.line.me/v2/bot/message/broadcast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 52
Expect: 100-continue
Connection: Keep-Alive

{"messages":{"type":"text","text":"test test test"}}
```

レスポンスは400(Bad request)になっています。
見た感じだと、APIリファレンスの要求に沿っている気がするのですが、どこかおかしいい箇所がありますでしょうか。

ちなにみに以下が現在成功している、マルチメッセージのFiddlerの結果です。比べても大きな違いはない気がします。
また、マルチメッセージはテンプレートの既存メソッドを指定しています。

```ここに言語を入力
POST https://api.line.me/v2/bot/message/multicast HTTP/1.1
Authorization: Bearer my token
Content-Type: application/json; charset=utf-8
Host: api.line.me
Content-Length: 143
Expect: 100-continue
Connection: Keep-Alive

{"to":["ID1","ID2"],"messages":[{"type":"text","text":"マルチメッセージ"}]}
```

C#でリクエストヘッダーとボディを一緒に送信する

ajaxでデータをポストしているのですが
クロームのデベロッパツールで送信している値をみることができますか？

$.ajax({
  url: '/test/' ,
  dataType: 'json',
  type: 'post',
data: {'id':  id}

このような実装です

chrome ajaxリクエストPOSTデータを見る方法

VBAにてHTTPでPOST送信を実施しAPIに繋ぐプログラムを作成していますが、
GETのURL送信とは違ってボディ部分に記載しないといけないと、調べて知りました。

その際にVBA上でボディに記載し、レスポンスを受けとる方法の記事が
調べても見つけれない状況で、詰まっております。
VBAでやること自体が自由度が落ちると思いますが、実装できるようでしたら
ご教授していただけると助かります。

調べながら組んでみたプログラムを載せていますので、
使い方が違うなどもあれば、ご教授いただきたいと思っております。

```ここに言語を入力
Public Function test()

Dim url
　　url = "https://webapi/api"

Dim JsonObject As Object
　Set JsonObject = New Dictionary
　　JsonObject.Add "product", "～～"
　　JsonObject.Add "contract", "～～"

Dim apikey As String
Dim apitoken As String
　　apikey = "～～～"
　　apitoken = "～～～"

Dim objhttp As Object
　　Set objhttp = CreateObject("MSXML2.XMLHTTP")
　With objhttp
  　.Open "POST", url, False
  　.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
  　.setRequestHeader "Content-Type", "application/json"
  　.setRequestHeader "Content-Type", "charset=UTF-8"
  　.setRequestHeader "Authorization", "Bearer " & apitoken               
  　.setRequestHeader "x-api-key", apikey
  　.send JsonConverter.ConvertToJson(JsonObject)
　　　Debug.Print 
　End With

End Function
```

VBAでAPIのPOST送信を実施したいがVBAでのボディに記載して送信方法がわかりません。

### 実現したいこと
ブラウザ上にある画面をアップロードする画面から画像ファイルを「upload」というフォルダに画像を保存したいです。
コードはWebからPOSTしてきた画像をPHPで処理するロジックになっております。
しかし、エラーが発生します。ファイルが見つからないというエラーが発生します。

### 発生している問題・分からないこと
ファイルが見つからないエラーが発生しております。そして、PHPのコードの四行目の
move_uploaded_file()関数内にある、$file['tmp_name']の[](ブラケット）が赤いまま（文字列になっている）です。

### エラーメッセージ
```error
Warning: move_uploaded_file(uploads/upload_cat.png): Failed to open stream: No such file or directory in /Applications/MAMP/htdocs/php_lesson/upload.php on line 4

Warning: move_uploaded_file(): Unable to move "/Applications/MAMP/tmp/php/phpAWejA0" to "uploads/upload_cat.png" in /Applications/MAMP/htdocs/php_lesson/upload.php on line 4
ファイルのアップロードが失敗しました
```

### 該当のソースコード

```HTML PHP
HTML
------------------
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ファイルのアップロード</title>
</head>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <label for="file">ファイル選択:</label>
        <input type="file" name="file" id="file"/>
        <input type="submit" value="アップロード"/>
    </form>
</body>
</html>
-----------------------------
PHP

<?php
    $file = $_FILES['file'];
    $targetFile = 'uploads/'.$file['name'];
    if(move_uploaded_file($file['tmp_name'], $targetFile)){
        echo 'ファイルがアップロードされました';
    }else{
        echo 'ファイルのアップロードが失敗しました';
    }
?>

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
chat GPTで調べた結果、「ディレクトリにファイルが見当たらない」と出ていて中々解決できそうにありません。

### 補足
バージョンはPHP8.0
MAMPを使っております。
OSはMacBook Proです。