I tried to run my app and log-in got an error in the console:

AxiosError {message: ‘Network Error’, name: ‘AxiosError’, code: ‘ERR_NETWORK’, config: {…}, request: XMLHttpRequest, …}
code: “ERR_NETWORK”

My code

Dockerfile

FROM php:8.3.4-apache as web

RUN apt-get update -y 
RUN apt-get install -y unzip zip libpq-dev libcurl4-gnutls-dev libicu-dev nano libzip-dev
RUN docker-php-ext-configure intl 

# PHP extensions
RUN docker-php-ext-install pdo pdo_mysql bcmath intl zip

# Mod Rewrite
RUN a2enmod rewrite

# Composer
COPY --from=composer:2.7.2 /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html

# apache config
COPY ./Docker/apache.conf /usr/local/apache2/conf/httpd.conf

COPY . .

COPY entrypoint.sh /usr/local/bin/entrypoint.sh
RUN chmod +x /usr/local/bin/entrypoint.sh

RUN chown -R www-data:www-data /var/www/html/storage
RUN chmod -R 777 /var/www/html/storage

ENTRYPOINT [ "entrypoint.sh" ]

# ===== NODE ===== NODE ===== NODE ===== NODE ===== NODE ===== 
FROM node:20.12.0 as node

WORKDIR /var/www/html/
COPY . .

RUN npm install --global cross-env

VOLUME /var/www/html/node_modules

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

my docker-compose file

version: "3.8"
services:
    # Web Service
    web:
        container_name: ibi_system_app_test
        depends_on:
            - database
            - node
        build:
            context: .
            target: web
            args:
                - APP_ENV=${APP_ENV}
        environment:
            - APP_ENV=${APP_ENV}
            - CONTAINER_ROLE=app
        volumes:
            - ./:/var/www/html
        ports:
            - 8000:80
        hostname: ${HOST_NAME}
        domainname: ${APP_URL}

    # Database Server
    database:
        container_name: database_test
        image: mysql:8.0
        ports:
            - 3306:3306
        environment:
            - MYSQL_DATABASE=${DB_DATABASE}
            - MYSQL_USER=${DB_USERNAME}
            - MYSQL_PASSWORD=${DB_PASSWORD}
            - MYSQL_ROOT_PASSWORD=${DB_PASSWORD}
        volumes:
            - db-data:/var/lib/mysql

    # Node Server
    node:
        container_name: node_test
        build:
            context: .
            target: node
        volumes:
            - ./node_modules:/usr/src/node_modules
        tty: true
        ports:
            - 5173:5173 # Expose Vite port

    # PHP myadmin
    phpmyadmin:
        container_name: phpmyadmin_test
        depends_on:
            - database
        image: phpmyadmin/phpmyadmin
        environment:
            - PMA_HOST=database
            - PMA_PORT=3306
        ports:
            - 8001:80

volumes:
    db-data: ~

my entrypoint.sh file that I run in the Dockerfile

#!/bin/bash
echo "test."

if [ ! -f "vendor/autoload.php" ]; then
    echo "Installing composer dependencies."
    composer install --no-progress --no-interaction
fi

if [ ! -f ".env" ]; then
    echo "Creating env file for env $APP_ENV"
    cp .env.example .env
else
    echo "env file exists."
fi

role=${CONTAINER_ROLE:-app}
echo "role - $role"

if [ "$role" = "app" ]; then
    php artisan migrate
    php artisan key:generate
    php artisan view:clear 
    php artisan cache:clear
    php artisan config:clear
    php artisan route:clear
    
    apache2-foreground
fi

The apache.conf file

<VirtualHost *:80>
    ServerAdmin webmaster@ibi-system-test
    DocumentRoot "/var/www/html/public"
    ServerName ibi-system-test
    ServerAlias www.ibi-system-test

    <Directory "/var/www/html/public">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

The Vite config

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue2";
import postcss from "./postcss.config";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/js/app.js"],
            postcss,
            refresh: true,
        }),
        vue(),
    ],
    define: {
        "process.env": process.env,
    },
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm.js",
            "~": "/resources/js",
        },
    },
    server: {
        host: true,
        port: 5173,
        hmr: { host: "localhost" },
    },
});

my .env file

APP_NAME=ibi_system_app_test
APP_ENV=development
APP_KEY=....
APP_DEBUG=true
APP_URL=http://ibi-system-test

VITE_APP_URL=http://ibi-system-test
VITE_API_URL=http://ibi-system-test/api

HOST_NAME=ibi-system-test

The request that I send to back end (Log-in)

import axios from "axios";
import useLoaderStore from "../../stores/LoaderStore";

const { VITE_API_URL } = import.meta.env;

export default async (requestBody) => {
    const loaderStore = useLoaderStore();
    try {
        loaderStore.showLoader();
        console.log(VITE_API_URL);
        const logIn = await axios.post(`${VITE_API_URL}/login`, requestBody);
        console.log(logIn);
        const { data } = logIn;

        return data;
    } catch (error) {
        // eslint-disable-next-line no-console
        console.log(error);
        console.log(error.response.data);
        return error.response.data;
    } finally {
        loaderStore.hideLoader();
    }
};

How can I solve this problem and log-in?

I can see the VITE_API_URL in the console – http://ibi-system-test/api

and after this, I got the error in the request

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Errorn    at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vite/deps/axios.js?v=6e20bfbd:1454:14)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
.....
    "code": "ERR_NETWORK",
    "status": null
}