前情提要 🔗

由於開發環境(dev)和生產環境(prodction)當中，採用SSR(伺服器端渲染)的Nuxt3可能會有Client和Server端行為不同的情況，
像是在設定環境變數的時候，就有遇過dev環境有正常套用，production環境卻沒有套用；
或在中間件middleware對於plugin axios的使用需要限定在clinet端，否則會在server端執行時就出錯。


而此次碰到的情況為Vue3-Vite專案(本站)遷移到Nuxt專案的過程中，將onMounted內的呼叫API內容移動到Nuxt的useAsync內發生API no response的問題。

Server端與Client端呼叫URL的差異 🔗

簡單來說，此次的情況便是Client端和Server端對API的URL處理不同造成的，
由於我的後端一樣是啟在同樣一台主機上面，所以我測試的時候，axios instance的baseUrl都設定為 http://localhost:[後端port]，
在dev環境這樣做是不會有問題的，但是一旦換到production，就會發現原本onMounted方式的API還是正常呼叫，但是useAsyncData這邊呼叫的卻no response。


碰到這種狀況是由於useAsyncData會先在server端就先做api的呼叫，但是在production的server這邊呼叫，
是認識不了localhost和127.0.0.1這兩種寫法的，
測試了很久，才發現需要使用真實IP來設定本地測試production環境的baseUrl，
這樣測試後，發現本地直接開server和用docker container啟動都可以正常在server端正常呼叫原本localhost的API。


看網路上查資料有人是說127.0.0.1的寫法可以，但是我實際測試無法成功，
如果有人嘗試成功的話，歡迎聯絡我或分享一下通知我解決方法，在這邊拋磚引玉一下土炮的解決方法。


目前還是會在本地production測試的情況採用IP位址的寫法。