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

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

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

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTTPヘッダー

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Q&A

解決済

1回答

1812閲覧

axios.postでresponseが空白になる

kharu

総合スコア2

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTTPヘッダー

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

0グッド

0クリップ

投稿2020/09/26 16:23

Nuxt.js + SpringBoot でログイン画面を作成しています。
axios.post後にresponseからauthorizationを取得しようとしているのですが
responseが空白で返ってくるので取得できません。

サーバーサイドはSpringBoot(SpringSecurity)で作成しています。

該当のソースコード

async login() {
// 取得先のURL
const url = '/login'
await this.$axios
.$post(
url,
{
userId: this.userId,
password: this.password
},
)
.then((response) => {
console.log(response) ←ここが""になる
console.log(response.headers.authorization) ←値を取得したい

}) .catch((error) => { alert(error) })

}

試したこと

Nuxt.jsのAuth Moduleを導入し、loginWithでアクセスした時は問題なくresponseが返ってきていました。
Auth Moduleなし(上記のコード)でアクセスするとresponseが空白で返ってきました。
ブラウザの開発者ツールではステータス200で問題なく返ってきています。
ヘッダーの中身はAuthModuleを導入しているときと同様でした。

考えられる問題点などアドバイスよろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

「@nuxtjs/axios」を利用されているかと思います。

このモジュール内で定義されているalias「$(get | post | patch ....)」の返却値は、「Promise<AxiosResponse>」ではありません。
https://github.com/nuxt-community/axios-module/blob/master/lib/plugin.js#L44

コードで表すと、以下の2つは同じ内容を出力します。

# $axios.get (prefix:) $axios.get((res: AxiosResponse) => console.log(res.data)) # $axios.$get (prefix: $) $axios.$get(res => console.log(res))

コードを以下のように修正して確認してみてください。

async login() { // 取得先のURL const url = '/login' await this.$axios .post( url, { userId: this.userId, password: this.password }, ) .then(response => { console.log(response.headers.authorization) // or // console.log(response.headers.Authorization) }) .catch((error) => { alert(error) }) }

投稿2020/10/02 23:07

yuhigash

総合スコア327

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

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

kharu

2020/10/05 00:32

回答ありがとうございます。Nuxtでは違いがあるんですね。 ご指摘の通りに修正するとやりたかったことが出来るようになりました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問