PrAha Challenge 課題2 「curlとpostmanに慣れる」 - 一人前のエンジニアになるための軌跡

こんにちは。最近業務が忙しく、投稿できておりませんでした。今回はcurlについて学びましたので、紹介していきます。 postmanは別の機会に紹介します。

curlを叩いてみる

まずは、httpbinというサービスを使って、HTTPリクエストの要素（headerやクエリパラメータなど）が返ってくるかどうかを試します。

問題1

カスタムヘッダーを加える（X-Test='hello'）
methodはGET
URLはhttps://httpbin.org/headers
入力

curl -H "X-Test : hello" https://httpbin.org/headers

出力

{
  "headers": {
    "Accept": "*/*",
    "Host": "httpbin.org",
    "User-Agent": "curl/7.64.1",
    "X-Amzn-Trace-Id": "Root=1-5fe93493-005c489e181254925f733d85",
    "X-Test": "hello"
  }
}

レスポンスはまずAccepetヘッダに"/"がセットされており、クライアントが全てのメディアタイプを処理できることを示してます。

HostヘッダーはクライアントがリクエストしたURIを示します。これは必須項目です。

続いて、User-agentはクライアントのソフトウェア情報を示します。今回はcurlのバージョン7.64.1を使用しています。

X-Amzn-Trace-IdヘッダはAWSのApplication Load Balancerにて付与されるものです。おそらくhttps://httpbin.orgがALBを使用しているので、今回付与されいるものと思われます。

"X-Test"は、リクエストする際に自身で付与したヘッダがちゃんと設定できていることが確認できます。

問題2

Content-Typeは"application/json"
methodはPOST
bodyは {"name": "hoge"}
URLはhttps://httpbin.org/post
入力

curl -X POST -H "Content-Type: application/json" -d '{"name":"hoge"}' https://httpbin.org/post

出力

{
  "args": {},
  "data": "{\"name\":\"hoge\"}",
  "files": {},
  "form": {},
  "headers": {
    "Accept": "*/*",
    "Content-Length": "15",
    "Content-Type": "application/json",
    "Host": "httpbin.org",
    "User-Agent": "curl/7.64.1",
    "X-Amzn-Trace-Id": "Root=1-5fe93789-33ec03362c93ce62575afb96"
  },
  "json": {
    "name": "hoge"
  },
  "origin": "103.4.10.234",
  "url": "https://httpbin.org/post"
}

ここで着目すべきヘッダはContent-Typeです。これはメッセージのボディの内容がどのような種類なのかをメディアタイプで示しております。ここではapplication/jsonなので、jsonタイプのメッセージをpostします。 "json": {"name": "hoge"}がpostされていることを確認できます。

originは、自身のIPアドレスを示してます。

問題3

{userA: {name: "hoge", age: 29}}をbodyに含めて送信します。

入力

curl -X POST -H "Content-Type: application/json" -d '{"userA" : {"name": "hoge", "age": 29}}' https://httpbin.org/post

今回はjsonオブジェクトをpostするので、ヘッダーに"Content-Type: application/json"を付与します。

出力

{
  "args": {},
  "data": "{\"userA\" : {\"name\": \"hoge\", \"age\": 29}}",
  "files": {},
  "form": {},
  "headers": {
    "Accept": "*/*",
    "Content-Length": "39",
    "Content-Type": "application/json",
    "Host": "httpbin.org",
    "User-Agent": "curl/7.64.1",
    "X-Amzn-Trace-Id": "Root=1-5fe938a4-3e9f73fb204c55c913d3af71"
  },
  "json": {
    "userA": {
      "age": 29,
      "name": "hoge"
    }
  },
  "origin": "103.4.10.234",
  "url": "https://httpbin.org/post"
}

入力で付与したオブジェクトが送れていることを確認できました。

問題4

問題2、問題3ではjsonタイプのメッセージを送りましたが、ここではapplication/x-www-form-urlencodedを指定して送ります。

application/x-www-form-urlencodedとは

キーと値は、その間に '=' がある形でキーと値の組になり、 '&' で区切られてエンコードされる。キーや値の英数字以外の文字は、パーセントエンコーディングされます。このため、このタイプはバイナリデータを扱うのには向かない。参考: developer.mozilla.org

URLからパラメータを送る際に使用するエンコードですね。例えば「https://*****.com/hogehoge?name=taro」等データをpostする際は、基本的にはapplication/jsonが主流で、シンプルなデータを送る際はapplication/x-www-form-urlencodedを使用する認識で良いかと思います。

入力

curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -d '"name=hoge"' https://httpbin.org/post

出力

{
  "args": {},
  "data": "",
  "files": {},
  "form": {
    "name": "hoge"
  },
  "headers": {
    "Accept": "*/*",
    "Content-Length": "9",
    "Content-Type": "application/x-www-form-urlencoded",
    "Host": "httpbin.org",
    "User-Agent": "curl/7.64.1",
    "X-Amzn-Trace-Id": "Root=1-5fe9419e-4a8c606a47c797c663c96377"
  },
  "json": null,
  "origin": "103.4.10.234",
  "url": "https://httpbin.org/post"
}

formに"name": "hoge"が設定されていることと、"json": nullになっていることを確認できます。

### 所感

個人開発している方は、あまりhttpヘッダーなど気にした方はいらっしゃらないと思います。
普段使っているwebサイトのhttpヘッダーはどこで見れるの？って思った方、ぜひChromeのデベロッパーツールを使用してみてください。
サイト上で右クリック⇨Inspect⇨Networkタブで見れると思います。

それでは良い開発ライフを！！