Задать вопрос
@aizhar777

В Nuxt 3 useFetch() вызывает ошибку Vue Router в Docker?

К сожалению не могу отследить в при каких обстоятельствах такое началось.
Но при попытке запустить в докере в консоль сыпятся ошибки, при этом приложение не отвечает на запросы.
И у меня совершенно не укладывается в голове, как запросы к внешнему API вызывать ошибку Vue Router.

Суть:
Запуская приложение у себя на хосте, npm run dev, приложение работает, ошибок нету.
Но если я запускаю приложение в докер контейнере, то все запросы useFetch вызывают ошибку Vue Router:

> docker-compose -f docker-compose.local.yml up
[+] Running 1/2нение пакетного файла [Y(да)/N(нет)]?
 ✔ Network frontend    Created                                                                                     0.1s
 - Container frontend  Created                                                                                     0.2s
Attaching to frontend
frontend  |
frontend  | > dev
frontend  | > nuxt dev
frontend  |
frontend  | Nuxt 3.10.2 with Nitro 2.8.1
frontend  |
frontend  | [QR code]
frontend  |
frontend  |   ➜ Local:    http://0.0.0.0:/
frontend  |   ➜ Network:  http://172.19.0.4:/ [QR code]
frontend  |   ➜ Network:  http://172.20.0.2:/
frontend  |
frontend  | [nuxt:tailwindcss] ℹ Using default Tailwind CSS file
frontend  | ℹ Compiled types/plugins.d.ts in 774.5ms
frontend  | ℹ Compiled plugins/server.mjs in 769.24ms
frontend  | ℹ Compiled plugins/client.mjs in 798.45ms
frontend  | ℹ Vite server warmed up in 76990ms
frontend  | ℹ Vite client warmed up in 82499ms
frontend  | [nitro] ✔ Nitro built in 4538 ms
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
frontend  | [Vue Router warn]: No match found for location with path "/api/v1/user/profile"
... ошибка бесконечная

при этом вызов идет в плагине NUXT
/// file: ./plugins/loadCity.ts
import {useCityStore} from "~/store/useCityStore";

export default defineNuxtPlugin(async (nuxtApp) => {
    const location = useCityStore();

    if(!location.currentCity){
         await location.fetchCity(); // Ошибка: No match found for location with path "/api/v1/user/profile"
    }
});

// file: /store/useCityStore.ts
import { defineStore } from "pinia";

export const useCityStore = defineStore('location', () => {
    async function fetchCity() {
        const {data} = await useApiFetch(`/api/v1/city/get`);

        // other code
    }
    return { 
//...
               fetchCity
// ...
     }
});

/// file: useApiFetch.ts
export function useApiFetch<T> (path: string|(() => string)|ComputedRef<string>, options: UseFetchOptions<T> = {}) {
  const config = useRuntimeConfig()

  const xsrfToken = useCookie('XSRF-TOKEN');

  let headers: any = {
    accept: 'application/json',
    referer: config.public.api.referer,
    ...options?.headers,
  }

  if (xsrfToken && xsrfToken.value !== null) {
    headers['X-XSRF-TOKEN'] = xsrfToken.value as string;
  }

  if (process.server) {
    headers = {
      ...headers,
      ...useRequestHeaders(['cookie']),
    }
  }

  return useFetch(path, {
    baseURL: config.public.api.url,
    watch: false,
    credentials: 'include',
    ...options,
    headers,
  })
}


Docker фаил:
# syntax = docker/dockerfile:1

ARG NODE_VERSION=20.9

FROM node:${NODE_VERSION}-slim as base

ENV NODE_ENV=development

WORKDIR /src

# Build
FROM base as build

COPY --link package.json package-lock.json ./

RUN npm install

# Run
FROM base

COPY --from=build /src/node_modules /src/node_modules

CMD [ "npm", "run", "dev" ]


Docker compose
version: '3.7'
services:
  frontend:
    container_name: frontend
    build:
      context: .
      dockerfile: ./Dockerfile.dev
    restart: always
    volumes:
      - ./:/src
      - node_modules:/src/node_modules
    working_dir: /src
    expose:
      - 80
      - 24678
    ports:
      - "24678:24678"
    environment:
      NODE_OPTIONS: '--max_old_space_size=4096'
      VIRTUAL_HOST: $FRONTEND_DOMAIN
      LETSENCRYPT_HOST: $FRONTEND_DOMAIN
      LETSENCRYPT_EMAIL: "le@bybuy.kz"
      HTTPS_METHOD: noredirect
      VIRTUAL_PORT: 80
      NITRO_PORT: 80
      NITRO_HOST: 0.0.0.0
      PORT: 80
      NUXT_SITE_URL: $NUXT_SITE_URL
      NUXT_API_URL: $NUXT_API_URL
      NUXT_API_REFERRER: $NUXT_API_REFERRER
      NUXT_SEARCH_API_KEY: $NUXT_SEARCH_API_KEY
      NUXT_SEARCH_HOST: $NUXT_SEARCH_HOST
      NUXT_SEARCH_PORT: $NUXT_SEARCH_PORT
      NUXT_SEARCH_PROTOCOL: $NUXT_SEARCH_PROTOCOL
    networks:
      - frontend
      - reverse-proxy

networks:
  reverse-proxy:
    name: reverse-proxy
    external: true
  frontend:
    name: frontend
    driver: bridge

volumes:
  node_modules:


Если закоментировать вызов useApiFetch(`/api/v1/city/get`);, то ошибка случается в следующем по счету запросу к API, и так далее
  • Вопрос задан
  • 246 просмотров
Подписаться 1 Сложный 7 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы