docker環境で vue2 axiosの非同期通信やって少しはまる vuejs

docker環境で vue2 axiosの非同期通信やって少しはまる

vue.config.jsとvueファイルの修正するだけで、通信するはずなのだが
vue画面で axios設定してもデータを取得せず、少しはまる。
とりあえず、原因究明として一般のインターネット上で公開されているapiでjsonファイルは読み込めるのかを確認。
するとこれはok、データ取得できてた。

結局の原因は、今回の環境がpc上のdocker環境でそれぞれ別コンテナで作成しており
docker networkでつなげる設定をしてなかったもんだから、それぞれ通信できてなかった。
よって対応は以下。

・docker networkでつなげる。
・対象ipアドレス確認。
docker inspect [apiがあるコンテナ名] | grep IPAddress

λ docker inspect hoge | grep IPAddress
SecondaryIPAddresses : null
IPAddress :
IPAddress : xxx.xxx.xxx.xxx
・pingで接続確認

・以下、vue.config.jsと、vueファイルの設定



■hoge.vue
<script >
import axios from "axios";
export default {
data() {
return {
info: null
}
}
mounted() {
axios
.get("/users/")
.then(response => {
this.info = response
console.log(response)
})
.catch(error => {
})
}
};
</script>

<template>
<div class="aboutbox">
<h1>axiosで非同期通信やってみる</h1>
{{ info }}
</div>
</template>


■vue.config.js
module.exports = defineConfig({
transpileDependencies: [
vuetify
]
devServer: {
proxy: {
"/users/": {
target: "http://xxx.xxx.xxx.xxx:9007" ★★docker inspectで調べたapi先のipアドレスを指定
}
}
}
})