Docker上のVueからDocker上のswaggerAPIを叩きたい

Question

構成

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

該当のコード

<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側に問題があるのかすらわからない有様で（どちらも素人です）検索ワードすら思いつかず困り果てています。お力添えをいただければ幸いです。

Answer 1

間が空いちゃってすみません。結果報告です。

• nginxのポートフォワードが間違っていた
• docker-compose.ymlのlinks設定が間違っていた
• nginxにCORSの設定がなかった
• そもそもgetのパスにpostでアクセスしていた

など、割と酷い有様でした……。
以下、自戒としてコードを張ります。せめてどこかの誰かの助けになりますよう。

  nginx:
    build: ./nginx
    ports:
      - '9000:9000'
    volumes:
      - ./nginx/server.conf:/etc/nginx/nginx.conf
    links:
      - server

http {
  charset UTF-8;
  server {
    listen 9000; # ←listen 9000しているくせにポートフォワードで80番を見ていた
    server_name localhost;
    location / {
        proxy_pass  http://server:3000;
        add_header Access-Control-Allow-Origin http://localhost;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
    }
  }
}

axios.get(
  "http://localhost:9000/users",
  null,
  {},
  {
    headers:{
    }
  })
.then(function(res){
  console.log(res)
})

Comments

[perpouh]

勉強のついでだと思って知らないことと知らないことを一緒にやるのはおすすめしません（こうなります）

Answer 2

こんばんは。

Vueのアプリケーションは http://localhost/ か http://localhost:80/ でアクセスしている状況でしょうか？

http://localhost:8083/parentsを直接ブラウザで開けば開けます。

とあるので、ブラウザから、SwaggerのこのエンドポイントにPOSTは出来る感じでしょうか。

CORSの可能性もあるのかな？とも思いました。

Answer 3

ホストマシンとvueのポート8083が接続されていないため、エラーが出ているんだと思います。
vueにネットワークを設定することで8083へアクセスできるようになるかと思います。

デフォルト・ネットワークの設定