Fix: 404 su Fetch/AJAX in Laravel Sottocartella
Fix: 404 su Fetch/AJAX in Laravel Sottocartella
🐛 Problema
``
GET https://sartup.it/admin/i40/import-profiles/1 404 (Not Found)
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
`
Causa
Laravel installato in sottocartella (/sartup/public/) ma fetch JavaScript usa path assoluto:`javascript
fetch('/admin/i40/import-profiles/1') // ❌ Manca /sartup/public/
// Chiama: https://sartup.it/admin/i40/...
// Corretto: https://sartup.it/sartup/public/admin/i40/...
`---
✅ Soluzione: URL Helper Laravel in JavaScript
Pattern Corretto
Nel
della view Blade:`javascript
@push('scripts')
<script>
// Genera URL base da Laravel
const baseUrl = '{{ url('/') }}';
// Output: https://sartup.it/sartup/publicconst apiUrl = '{{ route('admin.i40.import-profiles.index') }}';
// Output: https://sartup.it/sartup/public/admin/i40/import-profiles
// Usa negli endpoint
fetch(
${apiUrl}/${id}) // ✅ Path completo corretto
</script>
@endpush
`---
📝 Applicato in
File:
Prima ❌
javascript
fetch('/admin/i40/import-profiles/' + id) // 404
`Dopo ✅
javascript
const apiUrl = '{{ route('admin.i40.import-profiles.index') }}';
fetch(${apiUrl}/${id}) // ✅ Funziona
`---
🎯 Pattern Riutilizzabile
Per CRUD Routes
javascript
// Nel Blade
const baseRoute = '{{ route('admin.area.resource.index') }}';// GET single
fetch(
${baseRoute}/${id})// POST create
fetch(baseRoute, {method: 'POST', body: data})
// PUT update
fetch(
${baseRoute}/${id}, {method: 'PUT', body: data})// DELETE
fetch(
${baseRoute}/${id}, {method: 'DELETE'})
`Per URL Custom
javascript
const viewUrl = '{{ route('admin.area.resource.show', ':id') }}'.replace(':id', id);
const editUrl = '{{ route('admin.area.resource.edit', ':id') }}'.replace(':id', id);
`---
🔧 Alternative
1. URL completo per ogni endpoint
javascript
const showUrl = '{{ route('admin.i40.import-profiles.show', ':id') }}';
fetch(showUrl.replace(':id', id));
`2. Helper JavaScript globale
javascript
// In layout admin.blade.php
<script>
window.Laravel = {
baseUrl: '{{ url('/') }}',
csrfToken: '{{ csrf_token() }}'
};function route(name, params = {}) {
// Implementa routing lato client
}
</script>
`3. Path relativo (solo se NO sottocartelle)
javascript
fetch('admin/i40/import-profiles/' + id) // Relativo alla root
`---
⚠️ Errori Comuni
Path assoluto senza base
javascript
fetch('/api/endpoint')
// ❌ https://domain.com/api/endpoint
// Manca: /sartup/public/
`URL hardcoded
javascript
fetch('https://sartup.it/admin/...')
// ❌ Non funziona in locale/staging
`Route name sbagliato
javascript
const url = '{{ route('non.esiste') }}';
// ❌ Errore Blade se route non definita
`---
✅ Best Practice
1. Sempre usare helper Laravel per URL:
, {{ route() }}
2. Mai hardcodare URL completi
3. Preferire route named invece di path
4. Verificare APP_URL in .env---
🧪 Debug
Verifica URL generati
javascript
console.log('Base URL:', baseUrl);
console.log('API URL:', apiUrl);
console.log('Full URL:', ${apiUrl}/1);
`Verifica APP_URL in .env
env
APP_URL=https://sartup.it/sartup/public # ✅ Con sottocartella
`Test route
bash
php artisan route:list | grep import-profiles
`Output atteso:
GET admin/i40/import-profiles/{importProfile} admin.i40.import-profiles.show
``---
Fix applicato! Ora i fetch AJAX funzionano correttamente. ✅
Analisi Codice
Blocco 1
GET https://sartup.it/admin/i40/import-profiles/1 404 (Not Found)
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
Blocco 2 javascript
fetch('/admin/i40/import-profiles/1') // ❌ Manca /sartup/public/
// Chiama: https://sartup.it/admin/i40/...
// Corretto: https://sartup.it/sartup/public/admin/i40/...
Blocco 3 javascript
@push('scripts')
<script>
// Genera URL base da Laravel
const baseUrl = '{{ url('/') }}';
// Output: https://sartup.it/sartup/public
const apiUrl = '{{ route('admin.i40.import-profiles.index') }}';
// Output: https://sartup.it/sartup/public/admin/i40/import-profiles
// Usa negli endpoint
fetch(`${apiUrl}/${id}`) // ✅ Path completo corretto
</script>
@endpush
Blocco 4 javascript
fetch('/admin/i40/import-profiles/' + id) // 404
Blocco 5 javascript
const apiUrl = '{{ route('admin.i40.import-profiles.index') }}';
fetch(`${apiUrl}/${id}`) // ✅ Funziona
Blocco 6 javascript
// Nel Blade
const baseRoute = '{{ route('admin.area.resource.index') }}';
// GET single
fetch(`${baseRoute}/${id}`)
// POST create
fetch(baseRoute, {method: 'POST', body: data})
// PUT update
fetch(`${baseRoute}/${id}`, {method: 'PUT', body: data})
// DELETE
fetch(`${baseRoute}/${id}`, {method: 'DELETE'})
Blocco 7 javascript
const viewUrl = '{{ route('admin.area.resource.show', ':id') }}'.replace(':id', id);
const editUrl = '{{ route('admin.area.resource.edit', ':id') }}'.replace(':id', id);
Blocco 8 javascript
const showUrl = '{{ route('admin.i40.import-profiles.show', ':id') }}';
fetch(showUrl.replace(':id', id));
Blocco 9 javascript
// In layout admin.blade.php
<script>
window.Laravel = {
baseUrl: '{{ url('/') }}',
csrfToken: '{{ csrf_token() }}'
};
function route(name, params = {}) {
// Implementa routing lato client
}
</script>
Blocco 10 javascript
fetch('admin/i40/import-profiles/' + id) // Relativo alla root
Blocco 11 javascript
fetch('/api/endpoint')
// ❌ https://domain.com/api/endpoint
// Manca: /sartup/public/
Blocco 12 javascript
fetch('https://sartup.it/admin/...')
// ❌ Non funziona in locale/staging
Blocco 13 javascript
const url = '{{ route('non.esiste') }}';
// ❌ Errore Blade se route non definita
Blocco 14 javascript
console.log('Base URL:', baseUrl);
console.log('API URL:', apiUrl);
console.log('Full URL:', `${apiUrl}/1`);
Blocco 15 env
APP_URL=https://sartup.it/sartup/public # ✅ Con sottocartella
Blocco 16 bash
php artisan route:list | grep import-profiles
Blocco 17
GET admin/i40/import-profiles/{importProfile} admin.i40.import-profiles.show