構成
docker
version: '3' services: nginx: build: ./nginx ports: - '9000:80' volumes: - ./data/www:/var/www/html - ./nginx/server.conf:/etc/nginx/nginx.conf vue: build: ./vue volumes: - ./data/www:/app command: npm run dev ports: - '80:8080' tty: true swagger-editor: image: swaggerapi/swagger-editor container_name: "swagger-editor" ports: - "8081:8080" swagger-ui: image: swaggerapi/swagger-ui container_name: "swagger-ui" ports: - "8082:8080" volumes: - ./swagger/openapi.json:/openapi.json environment: SWAGGER_JSON: /openapi.json swagger-api: image: danielgtaylor/apisprout container_name: "swagger-api" ports: - "8083:8000" volumes: - ./swagger/openapi.json:/openapi.json command: /openapi.json
該当のコード
ParentList.vue
<script> import Parent from '@/components/Parent' export default { name: 'ParentList', data(){ return { parents: [] } }, created(){ this.fetchData() }, watch: { // ルートが変更されたらこのメソッドを再び呼び出します '$route': 'fetchData' }, components: { 'parent' : Parent }, methods: { fetchData () { axios.post( "http://localhost:8083/parents", null, {}, { headers:{ } }) .then(function(res){ //vueにバインドされている値を書き換えると表示に反映される // app.result = res.data console.log(res) }) .catch(function(res){ //vueにバインドされている値を書き換えると表示に反映される // app.result = res.data console.log(res) }) } } } </script>
ログ
spread.js:25 POST http://localhost:8083/parents 404 (Not Found) ParentList.vue?7aa4:51 Error: Request failed with status code 404 at e.exports (spread.js:25) at e.exports (spread.js:25) at XMLHttpRequest.d.onreadystatechange (spread.js:25)
http://localhost:8083/parents
を直接ブラウザで開けば開けます。
ホストを0.0.0.0にしてみたりもしましたがだめでした。Docker側に問題があるのかVue側に問題があるのかすらわからない有様で(どちらも素人です)検索ワードすら思いつかず困り果てています。お力添えをいただければ幸いです。
まだ回答がついていません
会員登録して回答してみよう