HTTP 500 Error (Axios, React/Laravel, WSL2, Docker)

Question

I keep getting an HTTP 500 Error when trying to fetch data via Axios from a table. Screenshot of browser window-- I'm accessing the application via localhost

I'm using React and Laravel, and I'm running my application inside a Docker container (w/ WSL2). I tried adding all the port forwarding rules that various articles suggest, as well as updating firewall rules. I can't get data to get logged to the browser console though. Any advice/help would be appreciated, I don't totally understand what I'm doing.

Windows PowerShell:

PS C:\WINDOWS\system32> netsh interface portproxy show all

Listen on ipv4:             Connect to ipv4:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
0.0.0.0         5173        172.29.39.95 172.17.0.1 172.18.0.1  5173
0.0.0.0         3306        172.29.39.95 172.17.0.1 172.18.0.1  3306
0.0.0.0         80          172.18.0.3      80

Screenshot of Docker containers

routes/api.php:

<?php

use App\Http\Controllers\CourseController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DataGeneratorController;


Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');

// routes/api.php
// Route::get('/generate-data', [DataGeneratorController::class, 'createPseudoData']);

// frontend axios connection
Route::apiResource('courses', CourseController::class);

App.jsx (Axios code):

export default function App() {

  // backend testing to learn how the flip this works

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        await axios
          .get('/api/courses')
          .then((response) => console.log(response));
      } catch (error) {
        console.log('Error fetching users: ', error);
      }
    };

    fetchUsers();
  }, []);

  //...

vite.config.ts:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

// need import line here to make tailwind work
import tailwindcss from 'tailwindcss';

export default defineConfig({
    css: {
        postcss: {
            plugins: [tailwindcss()]
        }
    },
    plugins: [
        laravel({
            input: 'resources/js/app.tsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
      hmr: {
          host: 'localhost',
      },
      proxy:{
        '/api': {
            target: 'http://172.18.0.1:3306',
            changeOrigin: true,
            headers: {
                Accept: 'application/json',
                "Content-Type": 'application/json'
            }
        }
      },
  },
});

Dockerfile:

# Dockerfile for Nginx
FROM nginx:alpine

# Expose port 80
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Screenshot of Windows Firewall rule

Answer 1

Found the issue! It was a type error in my Course.php model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Course extends Model
{
    use HasFactory;

    protected $fillable = [
        'classdescr',
        'classmeetinginfo',
        'associatedclass',
        'classattributes',
        'prereqs',
        'description',
        'instructor',
        'reqsfulfilled',
        'quartersoffered',
        'gradingpercent',
        'difficulty',
        'hrsperwk',
        'subject',
    ];

    protected $casts = [
        'classdescr' => 'json',
        'classmeetinginfo' => 'json',
        'associatedclass' => 'json',
        'classattributes' => 'json',
        'prereqs' => 'json',
        'reqsfulfilled' => 'json',
        'quartersoffered' => 'json',
        'gradingpercent' => 'json',
        'difficulty' => 'float', // was 'decimal'
        'hrsperwk' => 'integer', 
    ];
}