Docker環境のNuxtでaxiosエラーが出た時の対処法

dockerコンテナでNuxtとGoのコンテナを作り、axiosでurlを指定してpostしたところCORSエラーで2時間ハマった。

#環境

• windows10 on wsl2
• Docker
  • Nuxt 2.15.7
    - @nuxtjs/axios 5.13.6
  • Go 1.17.4
  • MySQL 8.0.27

#やったこと
まず初めに、Docker間で通信が行えるようにdocker-compose.ymlにネットワークを追加した。
**+**が追加箇所

version: "3"
services:
  client:
    container_name: client
    build:
      context: ./client
      dockerfile: DockerFile
    volumes:
      - ./client/app:/app
    ports:
      - 3000:3000
    tty: true
    stdin_open: true
+   networks:
      - external-api

  api:
    container_name: api
    build:
      context: ./api
      dockerfile: DockerFile
    # command: /bin/sh -c "go run main.go"
    stdin_open: true
    tty: true
    depends_on:
      - "db"
    volumes:
      - ./api/app:/app
    ports:
      - 8080:8080
    working_dir: /app
+   networks:
+     - external-api

  db:
    container_name: db
    image: mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: go_database
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      TZ: "Asia/Tokyo"
    volumes:
      - ./db/data:/var/lib/mysql
      - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3306:3306
+   networks:
+     - external-api

+ networks:
+  external-api:
+    external: true

externalなネットワークはdocker-compose upで起動してくれないらしいので手動で作ってあげる。

$ docker network create external-api
$ docker network ls

正直関係あるかの検証はしていない。

次に、nuxt.config.jsにproxyを追加した。
http://api:8080のapiのところはコンテナ名が入る。
localhost:8080でやっているサイトが多く見られたが自分の環境ではコンテナ名じゃないとアクセスできなかった。

nuxt.config.js

  axios: {
    proxy: true,
    baseURL: "http://api:8080",
  },

  proxy: {
    "/api/": {
      target: "http://api:8080",
    },
  },

vueファイルにエンドポイントを指定してpostするとうまく送信できた。

index.vue

  data() {
    return {
      user: {
        name: "Taro",
        email: "[e-mail]",
        age: 24,
      },
    };
  },

  methods: {
    async postUsers() {
      await this.$axios
        .post("/api/new", this.user)
        .then((res) => {
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

#参考
https://from-age35.com/1985.html