Q&A
前提・実現したいこと
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で取得した情報を表示するために何かアドバイスいただけると幸いです。
回答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
総合スコア5545
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/11 09:41
2019/12/11 12:23
2019/12/11 12:38
2019/12/12 00:17
2019/12/12 03:07
2019/12/12 23:20