Q&A
`<!doctype html><html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"><head>...`の`...`以降のデータはありますか？
Nuxt.jsで郵便番号の自動入力機能を実装しようとしているのですが、ローカルではちゃんと動いていたものがFirebase Hostingにデプロイすると機能しません。
郵便番号のAPIにはzipcloudを使っています。
console.logで返ってきたデータを見てみると本番環境の時だけなぜか<!doctype html><html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"><head>...というHTMLのデータが返ってきます。
調べてみても全然解決策がわからず困っております。
もし原因が分かる方がいらっしゃったらお知恵をお貸しいただけると嬉しいです。
vue
1<script> 2 methods: { 3 searchAddress() { 4 // フォームで入力された郵便番号を入れたAPIを呼び出す 5 this.$axios 6 .$get(`/api/search?zipcode=${this.userData.zipcode}`) 7 .then((res) => { 8 console.log(res) // ★ここでHTMLが返される 9 // 該当住所が存在しない場合はnullになる 10 if (res.results == null) { 11 alert('該当する住所がありません。') 12 } else { 13 // 該当住所があればaddressに代入する 14 this.userData.address1 = res.results[0].address1 15 this.userData.address2 = res.results[0].address2 16 this.userData.address3 = res.results[0].address3 17 this.userData.address1kana = res.results[0].kana1 18 this.userData.address2kana = res.results[0].kana2 19 this.userData.address3kana = res.results[0].kana3 20 } 21 }) 22 }, 23</script>
js
1// nuxt.config.js 2 3 axios: { 4 proxy: true, 5 }, 6 7 proxy: { 8 '/zipApi/': { 9 target: 'https://zipcloud.ibsnet.co.jp', 10 pathRewrite: { '^/zipApi/': '' }, 11 }, 12 }, 13
以下の通りです。
titleに今作っているアプリの名前が入っていますので開発中のアプリ自身のhtmlが返ってきているようです。。。
```
<!doctype html>
<html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
<head>
<title>sampleApp -sampleApp</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=""><meta data-n-head="1" name="format-detection" content="telephone=no"><meta data-n-head="1" data-hid="charset" charset="utf-8"><meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"><meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="givelien"><meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"><meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="givelien"><meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="givelien"><meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="## Build Setup"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.e3e9fb.png"><link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.e3e9fb.png" sizes="512x512"><link data-n-head="1" rel="manifest" href="/_nuxt/manifest.b5ed40a9.json" data-hid="manifest"><link rel="preload" href="/_nuxt/643b719.js" as="script"><link rel="preload" href="/_nuxt/2e35794.js" as="script"><link rel="preload" href="/_nuxt/99ed636.js" as="script"><link rel="preload" href="/_nuxt/bdb0708.js" as="script">
</head>
<body>
<div id="__nuxt"><style>#nuxt-loading{background:#fff;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 #000;-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(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}}}</script>
<script src="/_nuxt/643b719.js"></script><script src="/_nuxt/2e35794.js"></script><script src="/_nuxt/99ed636.js"></script><script src="/_nuxt/bdb0708.js"></script></body>
</html>
```
というか、`/zipApi`にproxyを設定しているのに`/api`に対してリクエストしてもproxyを介していないのではないでしょうか？`data-n-head`はnuxtが付与するmeta情報ですし、nuxtアプリ内にリクエストしているように見えます。
本当にローカルでは正しく動作しましたか？
質問者様のコメントを読み込む前に追加でコメントしてしまいました。
やはり`/api`と`/zipApi`のミスのように見えます。
すみません、teratail投稿前に色々試していて、記載ミスがありました。
$getの部分は
```
`/zipApi/api/search?zipcode=${this.userData.zipcode}`
```
でした。申し訳ございません。
こちらでローカルでは動作しており、本番環境では動作しない状態です。
前の質問参照しましたが、generateしたものをhostingしてるんですね。
（確証はありませんが）generateしたものはもはやNode.jsで動くアプリケーションではなく、ただの静的なリソースでしか無いのでproxyは動作しないはずです。
なるほどです、、解決の糸口が見つかった気がします。
一度、ご指摘の点考慮して修正してみようと思います。
ご丁寧にありがとうございました！
回答1件
0
自己解決
以下のコードにしたら動きました。
import axiosJsonpAdapter from 'axios-jsonp' searchAddress() { const ZIPCODE_API_URL = 'https://zipcloud.ibsnet.co.jp/api/search' const res = await this.$axios.$get(ZIPCODE_API_URL, { adapter: axiosJsonpAdapter, params: { zipcode: this.clone.postal_code, }, }) console.log(res) }
投稿2021/08/16 02:49
総合スコア118
あなたの回答
tips
プレビュー
