🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Nuxt.js

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

API

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

Q&A

解決済

1回答

1085閲覧

Nuxt APIで取得したデータを表示する

gnx_vw903

総合スコア74

Nuxt.js

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

API

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

0グッド

0クリップ

投稿2019/12/11 09:26

編集2019/12/11 09:42

前提・実現したいこと

this.$axios.get('/パス/') で取得した情報を表示したいと考えてます。

発生している問題・エラーメッセージ

現状下記のコードでデータを取得できてると思うのですが、resの中身を見てみるとHTMLのコードが帰ってきます。

const res = await this.$axios.$get( 'https://api-test.libexplorer.com/api?module=account&action=balance&address=a06c2e275db714d4a8d7b574ddf1d29acef2ddc8c26e7cbd3f2cb720779649d6/', ) console.log(res)

console.log(res)の中身

<!doctype html> <html > <head > <title>nuxt-todo-app</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="My wonderful Nuxt.js project"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/runtime.js" as="script"><link rel="preload" href="/_nuxt/commons.app.js" as="script"><link rel="preload" href="/_nuxt/vendors.app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"> </head> <body > <div id="__nuxt"><style>#nuxt-loading { visibility: hidden; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; animation: nuxtLoadingIn 10s ease; -webkit-animation: nuxtLoadingIn 10s ease; animation-fill-mode: forwards; overflow: hidden;}@keyframes nuxtLoadingIn { 0% {visibility: hidden;opacity: 0; } 20% {visibility: visible;opacity: 0; } 100% {visibility: visible;opacity: 1; }}@-webkit-keyframes nuxtLoadingIn { 0% {visibility: hidden;opacity: 0; } 20% {visibility: visible;opacity: 0; } 100% {visibility: visible;opacity: 1; }}#nuxt-loading>div,#nuxt-loading>div:after { border-radius: 50%; width: 5rem; height: 5rem;}#nuxt-loading>div { font-size: 10px; position: relative; text-indent: -9999em; border: .5rem solid #F5F5F5; border-left: .5rem solid #fff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: nuxtLoading 1.1s infinite linear; animation: nuxtLoading 1.1s infinite linear;}#nuxt-loading.error>div { border-left: .5rem solid #ff4500; animation-duration: 5s;}@-webkit-keyframes nuxtLoading { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }}@keyframes nuxtLoading { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); } 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); }}</style><script>window.addEventListener('error', function () { var e = document.getElementById('nuxt-loading'); if (e) e.className += ' error';});</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div><!-- https://projects.lukehaas.me/css-loaders --></div> <script type="text/javascript" src="/_nuxt/runtime.js"></script><script type="text/javascript" src="/_nuxt/commons.app.js"></script><script type="text/javascript" src="/_nuxt/vendors.app.js"></script><script type="text/javascript" src="/_nuxt/app.js"></script></body> </html>

試したこと

ブラウザーでは表示できているようです。
イメージ説明

APIで取得した情報を表示するために何かアドバイスいただけると幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

this.$axios.get('/パス/')ってかいてて、const res = await this.$axios.$post(を使ってるのはなにか意図してますか?(ブラウザでアクセスはgetです)


npmでnuxt入れて
nuxt.config.js

js

1module.exports = { 2 modules: [ 3 '@nuxtjs/axios', 4 ], 5 axios: { 6 } 7}

pages/index.vue

vue

1<template> 2 <h1>Hello world!</h1> 3</template> 4<script> 5export default { 6 async asyncData({ app }) { 7 const res = await app.$axios.$get( 8 'https://api-test.libexplorer.com/api?module=account&action=balance&address=a06c2e275db714d4a8d7b574ddf1d29acef2ddc8c26e7cbd3f2cb720779649d6/', 9 ) 10 console.log(res); 11 } 12} 13</script>

でとりあえずAPIにアクセスできました…どうも自分自身のページを見に行ってる気がする

投稿2019/12/11 09:40

編集2019/12/11 10:21
rururu3

総合スコア5545

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

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

gnx_vw903

2019/12/11 09:41

ありがとうございます! すみません、getのミスです、修正しておきます!
gnx_vw903

2019/12/11 12:23

ありがとうございます!試してみます!
gnx_vw903

2019/12/11 12:38

やって見たところ下記のエラーが出てきました ``` has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` もう少し色々試してみます!
gnx_vw903

2019/12/12 00:17

1つ質問があります! 「APIにアクセスできました」とおっしゃっていますが、これは写真で投稿してるような情報が取得できたということでしょうか? よろしくお願いします
rururu3

2019/12/12 03:07

確認したのはサーバーサイドレンダリング側です。 ブラウザでCORSがでるのでしたら、別問題です。(APIサーバー側のXMLHttpRequestによるアクセス制御)
gnx_vw903

2019/12/12 23:20

ありがとうございます!もう少し調べてみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問