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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

16296閲覧

ヘッダーとは何でしょうか

supermaruetsu

総合スコア148

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

HTTPヘッダー

Hypertext Transfer Protocol(HTTP)の中のHTTPヘッダフィールドはHTTPの要求やレスポンスの機能しているパラメーターが含まれます。その要求もしくはレスポンスライン(メッセージの最初の一行)でメッセージヘッダを作ります。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2018/11/15 17:06

表題の通りヘッダーとは何か正体がイマイチ理解できません。
あるサンプルアプリのコードを見ると下記のようなヘッダーの設定がありました。
通常POSTとして欲しい情報(例えばuser_id、text等)とは別になぜ下記のようなヘッダー情報を送る必要があるのでしょうか。
下記の例ではAuthorizationとX-Requested-Withという情報を送っているようですが、他にも必要な情報があったりするのでしょうか。
詳しい方、ご教示くださいませ。

javascript

1export function post(url, payload) { 2 return axios({ 3 method: 'POST', 4 url: url, 5 data: payload, 6 headers: { 7 'Authorization': `Bearer ${Auth.state.api_token}`, 8 'X-Requested-With': 'XMLHttpRequest' 9 } 10 }) 11}

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

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

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

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

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

guest

回答1

0

ベストアンサー

HTTP ヘッダは HTTP で送受信するデータの冒頭に書いてあるデータです(まんまですね)。
ブラウザ上にレンダリングはされないですがブラウザ、サーバ、経路上のプロキシとかが読んで様々な用途に使います。

例えば HTTP レスポンスのヘッダは curl -i https://teratail.com と -i オプションを付けて curl すると、いろいろ付いてるのが確認できると思います。

HTTP リクエストヘッダの Authorization フィールドは、(通常は)認証トークンをサーバに渡してて、サーバ側でこれを検証して受理したり 403 を返したりするのに使います。
X-Requested-With はちょっと分かんないです。

通常POSTとして欲しい情報(例えばuser_id、text等)とは別になぜ下記のようなヘッダー情報を送る必要があるのでしょうか。

POST するデータはリクエストボディに格納して送られます。
認証トークンも POST データの一部としてリクエストボディに書いてもいいじゃんとは思わなくもないですが、その方法だと GET でリクエストを受け付けるエンドポイントに認証をかけることができません。
POST も GET も認証トークンの送受信と検証は同じ方法でやったほうがコード的に簡潔で良く、ゆえにみんなリクエストヘッダに認証トークンを載せるんだろうと思います。

他にも必要な情報があったりするのでしょうか。

リクエストヘッダに何を書くべきかっていうのは

  • サーバ側で使っているミドルウェア/フレームワークのデフォルト挙動
  • その上に自前で書いたコードの挙動

といった要因で決まります。つまりAPIによって必要となるヘッダ情報はマチマチです。
さらにリクエストヘッダに実際に何が書かれるかは

  • クライアント側で使っているライブラリの挙動

にもよるので、ビシッと一言で答えるのが難しい気がします。
もし何かうまくいっていないのであれば、具体的な状況やエラーメッセージなどあれば分かる人がいるかも知れません。

投稿2018/11/15 18:48

set0gut1

総合スコア2413

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

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

supermaruetsu

2018/11/28 04:48

ありがとうございました。頂いた回答で、ピンポイントでモヤモヤしていた部分が理解できました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問