MAMP 500 Internal Server Error - mamp

Question

I got a little problem.
I made two virtual hosts "web-backend.local" and "oplossingen.web-backend.local".
But I always have a "500 Internal Server Error"
What am I doing wrong?
Hosts file:
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost
# MAMP VirtualHost Mappings
127.0.0.1 web-backend.local
127.0.0.1 oplossingen.web-backend.local
httpd-vhosts.conf:
#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.
#
# Use name-based virtual hosting.
#
#NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost web-backend.local:* >
DocumentRoot "/Users/yawuarsernadelgado/Documents/web-backend/cursus"
ServerName web-backend.local
<Directory "/Users/yawuarsernadelgado/Documents/web-backend/cursus">
AllowOverride All
Require all granted
Options +Indexes
IndexOptions NameWidth=*
</Directory>
ServerAlias web-backend.local
</VirtualHost>
<VirtualHost oplossingen.web-backend.local:* >
DocumentRoot "/Users/yawuarsernadelgado/Documents/web-backend/oplossingen"
ServerName oplossingen.web-backend.local
<Directory "/Users/yawuarsernadelgado/Documents/web-backend/oplossingen">
Allow from all
Require all granted
Options +Indexes
IndexOptions NameWidth=*
</Directory>
</VirtualHost>

Answer 1

Although it's reported MAMP 500 Server Error, it usually has little to do with MAMP.
500 internal server errors indicate you have crashed php pages. the solution is to add following error-reporting php code in your potential crashed page:
// display php error
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if you use jQuery.Ajax, then I am afraid the code above in action.php won't work, there is another method, which is followed by
add this to index.html or index.php
<div id="show-error" style="position: fixed; z-index: 10000; height: 20vh; width: 100vw; background:#f08080; border-radius:20px; opacity: 0.8; display: flex; font-size: 2rem; justify-content: center; align-items: center; display: none;"></div>
in the php file called by ajax, set a success code and failue code
try{
// main
echo json_encode(['status' => 1, 'msg' => 'succeed']);
}catch(Exception $e){
echo json_encode(['status' => 0, 'msg' => $e->getMessage()]);
}
finallly, in the ajax javascript file, catch error if it occurs
$.ajax({
url: '../php/action.php',
method: 'POST',
data: array('some data'),
}).done(function(result){
var output = JSON.parse(result);
if(output.status == 0){
$('#show-error').show();
$('#show-error').html(output.msg);
exit();
}else{
// no error occurred
}
});

Answer 2

Remove the following lines from httpd-vhosts.conf file from each virtual host:
<Directory "/Users/yawuarsernadelgado/Documents/web-backend/cursus">
AllowOverride All
Require all granted
Options +Indexes
IndexOptions NameWidth=*
</Directory>
Worked for me :D