Nuxt.jsでAPIを叩くとHTMLが返ってきたときの原因
今回はNuxt.jsを使っているときにAPIを叩くと結果として下記のようなHTMLが返ってきたときの原因についてご紹介していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html><html data-capo=""><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="modulepreload" as="script" crossorigin href="/_nuxt/usr/local/test/node_modules/nuxt/dist/app/entry.js"> <script type="module" src="/_nuxt/@vite/client" crossorigin></script> <script type="module" src="/_nuxt/usr/local/test/node_modules/nuxt/dist/app/entry.js" crossorigin></script><script> if (!window.__NUXT_DEVTOOLS_TIME_METRIC__) { Object.defineProperty(window, '__NUXT_DEVTOOLS_TIME_METRIC__', { value: {}, enumerable: false, configurable: true, }) } window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now() </script></head><body><div id="__nuxt"></div><div id="teleports"></div><script type="application/json" data-nuxt-logs="nuxt-app">[[]]</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"serverRendered":1},false]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/",buildId:"dev",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html> |
Nuxt.jsのバージョンは3.11.2となります。
Nuxt.jsでAPIを叩くとHTMLが返ってきたときの原因
結論から言うと、私の場合はAPIのリクエストのアドレスに問題がありました。
http://localhost:8000/
のアドレスに対してAPIを叩きたかったのですが、自身のNuxt.jsのアプリケーションのURLである
http://localhost:3000/
に向けてAPIを叩いておりました。
このレスポンスは、期待しているAPIデータではなく、NuxtアプリのHTMLドキュメントが返ってきている状態です。
Chromeの開発者ツールのNetworkタブなどで叩いているAPIのエンドポイントが正しいのかどうか確認してみましょう。
終わりに
今回はNuxt.jsを使っているときにAPIを叩くと結果として冒頭のようなHTMLが返ってきたときの原因についてご紹介いたしました。