Saya menyiapkan aplikasi tumpukan penuh dengan nuxt js menjalankan kode sisi klien saya, express js menjalankan api saya, dan mysql sebagai database saya. Untuk menjalankan semua proses ini saya telah menggunakan docker, lebih khusus lagi docker-compose. Setelah banyak konfigurasi, saya mendapatkan ketiga gambar untuk dijalankan bersama. Namun ada satu masalah, saya tidak tahu cara melakukan panggilan ke api saya dengan nuxt/axios.

Saya telah mencoba banyak taktik yang berbeda. Api ekspres saya tersedia untuk "dunia luar" di http://localhost:8080, jadi saya menyiapkan aksio baseURL untuk mencerminkan hal itu. Saya menjalankan beberapa aksioma uji di beberapa middleware nuxt js, dan terus mendapatkan kesalahan penolakan koneksi. Saya akhirnya menemukan bahwa saya dapat menggunakan jaringan komposisi buruh pelabuhan untuk menghubungkan frontend dan backend saya, jadi saya memetakan kembali aksio saya baseURL ke http://api:8080 (api adalah nama gambar pembuatan buruh pelabuhan saya), dan di permintaan axios di middleware nuxt js, itu bekerja seperti pesona. Kemudian, saya menulis beberapa kode, dan saya ingin mengirim permintaan aksio dalam metode vue. Meskipun permintaan axios di middleware bekerja dengan baseURL ini, permintaan axios baru dalam metode ini memberikan kesalahan

commons.app.js:434 OPSI http://api:8080/api/v1/get/ warna net::ERR_NAME_NOT_RESOLVED

Saya mencoba mengubah baseURL axios saya kembali ke localhost, dan sekarang permintaan axios dalam metode berfungsi, tetapi permintaan axios di middleware tidak berfungsi.

Docker-compose.yml

version: "3.3"

services:
  mysql:
    container_name: mysql
    image: mysql:5.7
    environment:
      MYSQL_USER: ${MYSQL_DEV_USER}
      MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
      MYSQL_ROOT_PASSWORD: ${MYSQL_DEV_ROOT_PASSWORD}
    ports:
      - 3306:3306
    restart: always
    volumes:
      - mysql_data:/var/lib/mysql
      - ./database/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql
      - ./database/insert_db.sql:/docker-entrypoint-initdb.d/insert_db.sql

  api:
    container_name: api
    depends_on:
      - mysql
    links:
      - mysql
    build:
      context: ./backend
      dockerfile: Dockerfile-dev
    environment:
      NODE_ENV: development
      MYSQL_USER: ${MYSQL_DEV_USER}
      MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
      MYSQL_HOST_IP: mysql
      PORT: ${API_PORT}
      HOST: ${API_HOST}
    expose:
      - 8080
    ports:
      - 8080:8080
    volumes:
      - ./backend:/app
    command: npm run dev

  frontend:
    container_name: frontend
    depends_on:
      - api
    links:
      - api
    build:
      context: ./frontend
      dockerfile: Dockerfile-dev
    environment:
      NUXT_PORT: 3000
      NUXT_HOST: 0.0.0.0
      NODE_ENV: development
      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
      API_HOST: api
      API_PORT: ${API_PORT}
      API_PREFIX: ${API_PREFIX}
    expose:
      - 3000
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/app
    command: npm run dev

volumes:
  mysql_data:

Nuxt.config.js

axios: {
    baseURL: 'http://api:8080/api/v1'
  },

Middleware nuxt

export default async function({ app, redirect, error }) {
  try {
    const response = await app.$axios.$get('/auth/login')
    if (!response.success) {
      throw new Error(response.message)
    }
    redirect('/admin')
  } catch (err) {
    console.log(err)
    await app.$auth.logout()
    error({ message: err.message, statusCode: 500 })
  }
}

Metode selanjutnya

methods: {
    async test() {
      const colors = await this.$nuxt.$axios.$get('/get/colors')
      console.log(colors)
    }
}

Terima kasih banyak!

P.S. Ini adalah pertanyaan stack overflow pertama saya!

4
Stewart Morris 6 Agustus 2019, 06:40

1 menjawab

Jawaban Terbaik

Modul Axios Nuxt menawarkan dua opsi konfigurasi untuk awalan URL, satu untuk server dan satu untuk browser .

axios: {
  baseURL: 'http://api:8080/api/v1',
  browserBaseURL: 'http://localhost/8080/api/v1'
},
2
Phil 6 Agustus 2019, 04:21