【Vue.js（VueCli3 / axios】axios.defaults.headers.common["Authorization"]が出来ない

Question

本来は以下のようなコードで、レスポンス（エラー403ですが..）を受け取りたいのですが、
①

axios.defaults.headers.common["Authorization"] = 'jsjsjsjsjs';

以下のように自動変換されてしまいます。
②

axios.defaults.headers.common.Authorization = 'jsjsjsjsjs';

①と②は同義になるでしょうか？

axios.defaults.headers.common.Authorization = 'jsjsjsjsjs';
の場合、開発者ツールNetwork/Responseにて
「this request has no response data available」が表示されています。
（※本来（["Authorization"]）の場合は、403が表示されているはず）

よろしくお願い致します。

Answer 1

①と②は同義になるでしょうか？

同義になります。

レスポンスはおそらく期待通り 403 コードで返されていると思います。

質問者さんが御覧になった、this request has no response data available は 「このリクエストは利用できるレスポンスを返しませんでした」 といった趣旨の内容です。
おそらく、レスポンスコードではなく、 レスポンスボディ を確認しているためこのような表記になっているものと思います。

一方、期待されている 403 はおそらく HTTP レスポンスの「権限がない」といった旨のレスポンスに利用されるコードで、これは レスポンスヘッダー に含められる内容です。

Comments

[frtne]

ご回答ありがとうございます！
２分類あるのですね、、、
レスポンスボディ と レスポンスヘッダーは
大きく分けると、どういった違いがあるのでしょうか？

[R.Mizukami]

ボディはやり取りしたい情報の本体部分、ヘッダーは本体部分を解釈するために必要な補足情報(エンコードの方法や接続に関する情報など)が格納されています。ヘッダとボディは別々に送られてくるというわけではなく、ヘッダーの後ろにボディがつなげて送られてきます。今回のように、ボディ部分が空で行われる通信もあります。
正確さに欠ける説明で恐縮ですが、雰囲気を理解する助けになればと思います。正確な情報は HTTP や HTTPS の仕様を確認してください。

[frtne]

ご返信ありがとうございます！（コメント遅くなりすみません...）

ざっくりと自分なりの解釈なのですが、例えば...
ツイッターで考えると

ヘッダでログイン者を判別して、
ボディでログイン者に応じたツイートを表示する
というようなイメージでしょうか？？

[R.Mizukami]

おそらく通信の仕様の理想としてはそんなイメージだったのだと思います（実際には、ボディ部分にユーザー識別情報を含めて認証管理を行う方法も普及してるようですが）。
ブラウザの開発者ツールを確認すると、ウェブサーバーとの間にどのような通信が発生しているか確認できます。多くの主要ブラウザで、F12で開くことのできる開発者ツールのネットワークタブを開いた状態でページのリロード等サーバーとの通信を行うと、行われている通信の内容が確認できます。

[frtne]

なるほど、、ご回答ありがとうございました！