118 lines
2.8 KiB
Markdown
118 lines
2.8 KiB
Markdown
# Troubleshooting Guide
|
|
|
|
## "Failed to fetch" Error When Uploading Images
|
|
|
|
This error means the frontend cannot connect to the backend API. Check the following:
|
|
|
|
### 1. Check Backend is Running
|
|
|
|
Make sure your backend server is running:
|
|
```bash
|
|
cd blog-editor/backend
|
|
npm run dev
|
|
```
|
|
|
|
You should see:
|
|
```
|
|
✅ Blog Editor Backend is running!
|
|
🌐 Server: http://localhost:5001
|
|
```
|
|
|
|
### 2. Check Frontend API URL
|
|
|
|
In `blog-editor/frontend/.env`, make sure:
|
|
```env
|
|
VITE_API_URL=http://localhost:5001
|
|
```
|
|
|
|
**Important:** The port must match your backend port (check your backend terminal output).
|
|
|
|
### 3. Check Browser Console
|
|
|
|
Open browser DevTools (F12) → Console tab and look for:
|
|
- Network errors
|
|
- CORS errors
|
|
- 404 errors
|
|
- Connection refused errors
|
|
|
|
### 4. Test Backend Manually
|
|
|
|
Open in browser or use curl:
|
|
```bash
|
|
# Health check
|
|
curl http://localhost:5001/api/health
|
|
|
|
# Should return: {"status":"ok"}
|
|
```
|
|
|
|
### 5. Check CORS Configuration
|
|
|
|
In `blog-editor/backend/.env`:
|
|
```env
|
|
CORS_ORIGIN=http://localhost:4000
|
|
```
|
|
|
|
Make sure this matches your frontend URL.
|
|
|
|
### 6. Check AWS S3 Configuration
|
|
|
|
If you see "AWS S3 is not configured" error:
|
|
|
|
In `blog-editor/backend/.env`, add:
|
|
```env
|
|
AWS_REGION=us-east-1
|
|
AWS_ACCESS_KEY_ID=your_access_key
|
|
AWS_SECRET_ACCESS_KEY=your_secret_key
|
|
S3_BUCKET_NAME=blog-editor-images
|
|
```
|
|
|
|
**Note:** Image uploads won't work without AWS S3 configured. You can:
|
|
- Set up AWS S3 (recommended for production)
|
|
- Or temporarily disable image uploads for testing
|
|
|
|
### 7. Check Authentication Token
|
|
|
|
Make sure you're logged in. The upload endpoint requires authentication.
|
|
|
|
Check browser console → Application → Local Storage:
|
|
- Should have `access_token`
|
|
- Should have `refresh_token`
|
|
|
|
### 8. Common Issues
|
|
|
|
**Issue:** Backend on different port
|
|
- **Fix:** Update `VITE_API_URL` in frontend `.env` to match backend port
|
|
|
|
**Issue:** CORS blocking requests
|
|
- **Fix:** Update `CORS_ORIGIN` in backend `.env` to match frontend URL
|
|
|
|
**Issue:** Backend not running
|
|
- **Fix:** Start backend: `cd blog-editor/backend && npm run dev`
|
|
|
|
**Issue:** Network error
|
|
- **Fix:** Check firewall, VPN, or proxy settings
|
|
|
|
### 9. Test Upload Endpoint Directly
|
|
|
|
```bash
|
|
# Get your access token from browser localStorage
|
|
# Then test:
|
|
curl -X POST http://localhost:5001/api/upload/presigned-url \
|
|
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"filename":"test.jpg","contentType":"image/jpeg"}'
|
|
```
|
|
|
|
### 10. Enable Detailed Logging
|
|
|
|
Check backend terminal for error messages when you try to upload.
|
|
|
|
## Quick Fix Checklist
|
|
|
|
- [ ] Backend is running (check terminal)
|
|
- [ ] Frontend `.env` has correct `VITE_API_URL`
|
|
- [ ] Backend `.env` has correct `CORS_ORIGIN`
|
|
- [ ] You're logged in (check localStorage for tokens)
|
|
- [ ] Browser console shows no CORS errors
|
|
- [ ] AWS S3 is configured (if using image uploads)
|