Docker, Laravel и Vue — и получите AxiosError «Ошибка сети» ⇐ Apache

[Anonymous]

Я запустил приложение и попытался войти в систему, но столкнулся со сбоем и получил сообщение об ошибке в консоли:

AxiosError {message: «Ошибка сети» ', имя: 'AxiosError', код: 'ERR_NETWORK', конфигурация: {…}, запрос: XMLHttpRequest, …код: "ERR_NETWORK"

Мой код
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"]

мой файл для создания докеров
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: ~

мой файл enterpoint.sh, который я запускаю в 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

Файл apache.conf

ServerAdmin webmaster@ibi-system-test
DocumentRoot "/var/www/html/public"
ServerName ibi-system-test
ServerAlias www.ibi-system-test


Options Indexes FollowSymLinks
AllowOverride All
Require all granted


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


Конфигурация Vite
/* 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" },
},
});

мой файл .env
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

Запрос, который я отправляю на серверную часть (вход в систему)
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); // i got the log - http://ibi-system-test/api
const logIn = await axios.post(`${VITE_API_URL}/login`, requestBody); // the error
console.log(logIn);
const { data } = logIn;

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


Я думаю, проблема в связи между фронтальной и серверной частью.
Я могу добраться до сервер, получив URL-адрес запроса, например
http://localhost:8000/api/loan
И я получил данные о кредите в базе данных.
Так что с моей серверной частью все в порядке.

Как я могу решить эту проблему и установить соединение между веб-страницей и сервером?
Ошибка, которая мне ответила, была в консоль.
{
"message": "Network Error",
"name": "AxiosError",
"stack": "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:5173/node_modules/.vit ... bd:1454:14)",
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
.....
"code": "ERR_NETWORK",
"status": null
}



Подробнее здесь: https://stackoverflow.com/questions/786 ... work-error