axios、nuxt 和 docker 的奇怪行为

Posted 2023-02-22

【中文标题】axios、nuxt 和 docker 的奇怪行为

【英文标题】：Odd behavior with axios, nuxt, and docker

【发布时间】：2019-12-13 13:38:54

【问题描述】：

我正在设置一个全栈应用程序，其中 nuxt js 运行我的客户端代码，express js 运行我的 api，mysql 作为我的数据库。为了运行所有这些进程，我一直在使用 docker，更具体地说是 docker-compose。经过多次配置，我已经让所有三个图像一起运行。但是有一个问题，我不知道如何使用 nuxt/axios 调用我的 api。

我尝试了许多不同的策略。我的 express api 在http://localhost:8080 上可供“外部世界”使用，所以我设置了我的 axios baseURL 来反映这一点。我在一些 nuxt js 中间件中运行了一些测试 axios 获取，并不断收到连接拒绝错误。我终于想通了，我可以使用 docker-compose 网络来连接我的前端和后端，所以我将我的 axios baseURL 重新映射到 http://api:8080（api 是我的 docker-compose 图像的名称），并在 axios 请求中nuxt js 中间件，它就像一个魅力。后来在写一些代码，想用vue的方法发送一个axios请求。即使中间件中的 axios 请求正在使用此 baseURL，但该方法中的此新 axios 请求给出了错误

commons.app.js:434 选项http://api:8080/api/v1/get/colors net::ERR_NAME_NOT_RESOLVED

我尝试将我的axios baseURL改回localhost，现在方法中的axios请求可以了，但是中间件中的axios请求不起作用。

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'
  ,

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 )
  

nuxt 方法

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

非常感谢大家！

附：这是我的第一个堆栈溢出问题！

【问题讨论】：

我不太了解 Nuxt，所以请帮帮我...您如何从中间件运行这些 "test" 请求？它们在什么环境中运行？

@Phil 当我转到 localhost:3000/verify 路由时，nuxt js 会加载一个 .vue 文件，该文件会自动运行该中间件。我从这篇文档nuxtjs.org/guide/routing#middleware 中了解了我对中间件的了解。另外，感谢您重新格式化我的问题！如果还有什么我可以澄清的，请告诉我。

【参考方案1】：

Nuxt 的Axios module 为 URL 前缀提供了两种配置选项，一种用于服务器，一种用于浏览器。

axios: 
  baseURL: 'http://api:8080/api/v1',
  browserBaseURL: 'http://localhost/8080/api/v1'
,