Я пишу простой пет-проект на Laravel 10 + Vue 3. Написал проект, он отлично работает, затем создал Docker-контейнеры. Серверная часть проекта работает нормально (всё проверил через Postman), но во фронтенд-части возникает ошибка при попытке обновить/удалить задачу (с созданием и просмотром всё в порядке). Ошибка возникает только при обновлении/удалении задачи: метод POST не поддерживается для маршрута api/tasks/$%7Bid%7D. Поддерживаемые методы: PUT, DELETE.
default.conf (используется для nginx в docker), думаю проблема в нем.
server {
listen 80;
server_name localhost;
root /var/www/frontend/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
try_files $uri /index.php$is_args$args;
}
location ~ ^/index\.php(/|$) {
fastcgi_pass app:9000;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME /var/www/backend/public/index.php;
fastcgi_param DOCUMENT_ROOT /var/www/backend/public;
internal;
}
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
}
Также приведу taskStore.js, которое используется в Vue
import { defineStore } from 'pinia'
import api from '@/api'
export const useTaskStore = defineStore('task', {
state: () => ({
tasks: [],
loading: false,
error: null,
lastRequestTime: null,
useMethodOverride: false
}),
getters: {
hasError: (state) => state.error !== null,
isLoading: (state) => state.loading,
getTaskById: (state) => (id) => state.tasks.find(task => task.id === Number(id))
},
actions: {
async _executeRequest(method, url, data = null, errorMessage) {
this.loading = true
this.error = null
try {
let response
if (this.useMethodOverride && ['PUT', 'DELETE', 'PATCH'].includes(method)) {
response = await api.post(url, { ...data, _method: method })
} else {
switch (method) {
case 'GET': response = await api.get(url); break
case 'POST': response = await api.post(url, data); break
case 'PUT': response = await api.put(url, data); break
case 'DELETE': response = await api.delete(url, data); break
default: throw new Error(`Unsupported method: ${method}`)
}
}
this.lastRequestTime = new Date()
return response.data
} catch (err) {
this.error = err.response?.data?.message || errorMessage || `Request failed: ${err.message}`
throw err
} finally {
this.loading = false
}
},
async fetchTasks() {
const data = await this._executeRequest('GET', '/tasks', null, 'Ошибка при загрузке задач')
this.tasks = data
return data
},
/**
* Создание новой задачи
*/
async createTask(taskData) {
const data = await this._executeRequest('POST', '/tasks', taskData, 'Ошибка при создании задачи')
this.tasks.push(data)
return data
},
/**
* Обновление задачи
*/
async updateTask(id, taskData) {
const taskId = Number(id)
const data = await this._executeRequest(
'PUT',
`/tasks/${taskId}`,
taskData,
'Ошибка при обновлении задачи'
)
const index = this.tasks.findIndex(task => task.id === taskId)
if (index !== -1) this.tasks[index] = data
return data
},
/**
* Удаление задачи
*/
async deleteTask(id) {
const taskId = Number(id)
if (isNaN(taskId)) throw new Error(`Некорректный ID задачи: ${id}`)
await this._executeRequest('DELETE', `/tasks/${taskId}`, null, 'Ошибка при удалении задачи')
this.tasks = this.tasks.filter(task => task.id !== taskId)
return true
},
setMethodOverride(enabled) {
this.useMethodOverride = enabled
},
clearError() {
this.error = null
}
}
})
Перепробовал всё, что мог, сам новичок, имею относительно небольшой опыт
Сложный
