wie behebt man 403 Forbidden Error bei Xampp als Localhost?
Ich habe grade mit PHP und JS eine Galerie auf einer Test Webiste fertig gemacht welche über Xampp läuft.
Als ich diese dann über ein anderes Gerät im Netzwerk testen wollte bekam ich den Error 403 Forbidden und seit dem hab ich diesen Fehler auch auf den Localhost.
Nun laden auch alle anderen Bilder nicht mehr und geben den selben Error aus.
Ich hab schon im Internet gesucht und z.b bei der Xampp config bei phpAdmin all granted geändert aber es funktioniert immer noch nicht und weiß nun nicht mehr weiter.
Daher die Frage wie löse ich diesen Error?
Ich weiß nicht wieso aber ein Teil meines Problems habe ich nun gelöst.
function ordnerButtonsErschaffen(){
// console.log(dataContainer); testzwecks
if (dataContainer) {
var Ausgabebereich = document.getElementById('main');
for(var i = 0; i<data.length; i++){
console.log(data[i][0]);
var but = document.createElement("button");
but.innerHTML = data[i][0];
//var img = new Image(200,150);
//img.src = "../Image/FavStagelight/"+data[i][0]+"/"+data[i][1];
//but.appendChild(img);
but.id = "button";
but.data = i;
Ausgabebereich.appendChild(but);
but.addEventListener("click", zurückButtonuBilder);
}
}
}
Die auskommentierten Zeilen dieser Funktion haben die ersten Bilder jedes Ordners auf deren jeweiligen Button gemacht. Diese haben dann auch noch geladen aber wenn man den Button dann gedrückt hatte und alle geladenen werden sollten hat man den Fehler bekommen.
Jetzt bekommt man den Fehler nicht mehr wenn alle laden er taucht nur auf wenn ich die Bilder in die Buttons davor einfüge wieso ist das so ?
Hast du eine Datei .htaccess ?
nicht das ich wüsste
Dann schau mal nach. Dort kann was mit deny ... stehen, was zu deinem Fehler führen kann.
wo könnte diese Datei sich denn befinden?
4 Antworten
Anhand des JavaScript Quellcodes sehe ich, dass dort vielleicht HTML-Fehler drin sein könnten.
type="button" vermisse ich
Das Attribut data-* hat hinter data noch ein Minuszeichen laut Spec, bei Dir aber nicht.
Und dass ein <button> ein <image> als Subknoten hat, müsstest du noch mal überprüfen.
Vorschlag: schreibe eine kurze HTML-Sequenz, wie du sie per JavaScript schreiben möchtest und speichere die Datei ab. Dann schickst du die Datei durch einen HTML-Validator wie beispielsweise https://validator.w3.org/.
Weitere Antwort kommt gleich zu den Umlauten im Pfad, woran es auch liegen kann.
Habe ich mich wohl missverständlich ausgedrückt. Es geht nicht um die JavaScript-Variable 'data', sondern um das HTML-Button-Element-Attribut
but.data = i;
Achso oder ich dich nur falsch verstanden.
Ich habe nur nach irgendwas gesucht um mir den Index wert des Buttons aus dem Array zu speichern und das war das erste was ich gefunden habe daher hab ich das benutzt *~*
Bin noch neu in JS xD Aber an sich funktioniert das ja auch xD
Dafür bin ich alt in HTML. Kannte das noch nicht, weil es wohl nach dem Buch, mit dem ich HTML gelernt habe, erst hinzugekommen ist.
Dass es funktioniert liegt daran, dass die Browser leider sehr fehlertolerant sind. Für mich als Software-Entwickler möchte ich das gerne ausschalten.
Also sollte ich es dann besser data-index nennen?
but.data-index = i;
Sobald ich das hinzufüge bekomme ich von VSC den error das hinter Index ein ; sein müsste also anstatt dem = *~*
Dann nimm das wieder zurück und kümmere dich erst mal um den Pfad zum src-Attribut vom <img>
img.src = "../Image/FavStagelight/"+ordner+"/"+data[nummer][i];
Ordner und Nummer wird als Variable in der Funktion mitgeben und data ist global in der JS-Datei drin .
Und dieser Pfad funktioniert ja auch solange ich keine Bilder in den Buttons mit einfüge.
So schauts aus wenn die Stelle aus meiner Ergänzung Aus kommentiert ist.
So wenn es drin ist. Die einzige änderung ist dieses Bild schon beim Button mit zu geben.
Nun die dazugehörige PHP Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<?php
$timestamp = date("YmdHis");
?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/style.css?v=<?php echo $timestamp;?>">
<link rel="icon" type="image/jpg" href="../Image/icon.JPG">
<title>Galerie - Stagelight Jochen Schlattmann</title>
<style>
</style>
</head>
<body>
<header id="fixiert">
<nav id="MenueBox">
<a class="#MenueLinks"href="../index.php" >
<img id="Logo" src="../Image/Logo.jpg">
</a>
<a class="MenueLinks" href="../index.php">
Startseite
</a>
<a class="MenueLinks" href="Leistungen.php">
Leistungen
</a>
<a class="MenueLinks" href="Profil.php">
Profil
</a>
<a class="MenueLinks" id="aktuell" tabindex="0" aria-current="page">Galerie
</a>
<a class="MenueLinks" href="Partner.php">
Partner
</a>
<a class="MenueLinks" href="Impressum.php">
Impressum
</a>
<a class="MenueLinks" href="AGB.php">
AGB
</a>
</nav>
</header>
<div id="jannisfehler"></div>
<h1>Galerie</h1>
<div id="spacingZurück"></div>
<div id="gallerie">
</div>
<?php include ("../php/footer.php"); ?>
<?php
$verzeichnis = "../Image/FavStagelight";
$ordner = [];
$ordner2 = [];
$ordner3 = [];
if ( is_dir ( $verzeichnis ))
{
if ( $handle = opendir($verzeichnis) )
{
while (($file = readdir($handle)) !== false)
{
$ordner[] = $file;
}
closedir($handle);
}
}
array_splice($ordner,0,2);
foreach($ordner AS $ordnerName)
{
$ordner2[] = $ordnerName;
if ( is_dir ( $verzeichnis. "/" .$ordnerName ))
{
if ( $handle = opendir($verzeichnis."/".$ordnerName) )
{
while (($file = readdir($handle)) !== false)
{
$ordner2[] = $file;
}
closedir($handle);
array_splice($ordner2,1,3);
}
}
$ordner3[] = $ordner2;
$ordner2 = array();
}
$json = htmlspecialchars(json_encode($ordner3 ), ENT_QUOTES, 'UTF-8');
?>
<div data-json="<?= $json ?>"></div>
<script src="../js/galerieScript.js"></script>
</body>
</html>
Und das JS dazu:
const dataContainer = document.querySelector("[data-json]");
const data = JSON.parse(dataContainer.dataset.json);
function galerie(ordner, nummer,){
for(var i = 1; i<data[nummer].length;i++){
console.log(1);
var img = new Image(200,150);
img.src = "../Image/FavStagelight/"+ordner+"/"+data[nummer][i];
img.id="galerieBilder";
var but = document.createElement("button");
but.id = "galerieButton";
but.appendChild(img);
var Ausgabebereich = document.getElementById('main');
Ausgabebereich.appendChild(but);
}
}
function galerieErschaffen(){
var main = document.createElement("main");
main.id = "main";
var Ausgabebereich = document.getElementById('gallerie');
Ausgabebereich.appendChild(main);
Ausgabebereich = document.getElementById("main");
ordnerButtonsErschaffen();
}
function zurueck(){
if (document.getElementById('main')) {
var main = document.getElementById('main');
main.parentNode.removeChild(main);
}
if (document.getElementById('galerieZurück')) {
var galerieZurückButton = document.getElementById('galerieZurück');
galerieZurückButton.parentNode.removeChild(galerieZurückButton);
}
galerieErschaffen();
}
function zurückButtonuBilder(evt){
const ordner = evt.currentTarget.innerHTML;
const nummer = evt.currentTarget.data;
console.log(nummer);
var but = document.createElement("button");
but.innerHTML = "Zurück";
but.id = "galerieZurück";
var Ausgabebereich = document.getElementById('spacingZurück');
Ausgabebereich.appendChild(but);
but.addEventListener("click", zurueck);
if (document.getElementById('main')) {
var maindel = document.getElementById('main');
maindel.parentNode.removeChild(maindel);
var main = document.createElement("main");
main.id = "main";
var Ausgabebereich = document.getElementById('gallerie');
Ausgabebereich.appendChild(main);
}
galerie(ordner, nummer);
}
function ordnerButtonsErschaffen(){
// console.log(dataContainer); testzwecks
if (dataContainer) {
var Ausgabebereich = document.getElementById('main');
for(var i = 0; i<data.length; i++){
console.log(data[i][0]);
var but = document.createElement("button");
but.innerHTML = data[i][0];
var img = new Image(200,150);
img.src = "../Image/FavStagelight/"+data[i][0]+"/"+data[i][1];
but.appendChild(img);
but.id = "button";
but.data = i;
Ausgabebereich.appendChild(but);
but.addEventListener("click", zurückButtonuBilder);
}
}
}
galerieErschaffen();
Hier ist es noch mit drin.
Hast du Xampp vollständig parametriert? Dann hast du ein Verzeichnis als Root angegeben.
Dort würde ich suchen. Pass auf, dass Dateien, die mit einem Punkt beginnen, angezeigt werden.
habe jz eine htaccess datei gefunden ist aber eine .php datei also vermutlich die falsche oder?
ich stelle mich vermutlich dumm an aber ich kann ihn einfach nicht finden....
und ja ich habe es an das ich versteckte Ordner sehen kann...
Wenn du nur http://localhost eingibst, dann liest XAMPP die Datei index.html aus einem sogenannten RootVerzeichnis. Ist dir dieses bekannt? Dort müsste .htaccess liegen, falls es das gibt.
Was für eine Datei willst du den laden? PHP, HTML, ...?
Im eigentlichen Root Ordner von Xampp befindet diese Datei sich aber nicht da habe ich natürlich direkt rein geschaut und danach angefangen die UNter Ordner zu durchsuchen *~*
Wenn du von einer Datei die ich lade redest denek ich du meinst die Website nh? Die Seite an sich läd und kann geöffnet werden aber die Bilder die sich darauf befinden eben nicht mehr.
Und wenn du nur die URL eines Bildes in die Adresszeile des Browsers eingibst? Liegen die alle in einem Unterverzeichnis? Darf XAMPP da lesen?
Ja es hat ja auch funktioniert alles ganz normal und dann ohne Änderung eben nicht mehr nachdem ich mit einem anderen Gerät auf diese Seite gegangen bin.
Die Dateien liegen alle unter Xampp/htdocs/"projektname"/ und dann da drin in dem Ordner Image mit allen anderen Sachen auch
Einfach in das Apache error.log schauen, da steht dann meist, was schief gelaufen ist :D
Maximale Erfolge!
[Mon Jul 19 23:22:12.615711 2021] [core:error] [pid 6440:tid 1816] (20024)The given path is misformatted or contained invalid characters: [client ::1:58296] AH00127: Cannot map GET /stagelight/Image/FavStagelight/B%C3%BChnenlicht%3Cimg%20width=%22200%22%20height=%22150%22%20src=%22../Image/FavStagelight/B%C3%BChnenlicht/210720131344.jpg%22%3E/IMG_1562.JPG HTTP/1.1 to file, referer: https://localhost/stagelight/seiten/Galerie.php
Ist die Fehler Meldung.
Was ich nun noch weniger nachvollziehen kann nach meiner Ergänzung der Frage da ich weiß das der Pfad funktioniert also verstehe ich den Fehler nun garnicht mehr xD
Wenn du den relevanten Text der Fehlermeldung decodierst kommt folgendes raus:
GET /stagelight/Image/FavStagelight/Bühnenlicht<img width="200" height="150" src="../Image/FavStagelight/Bühnenlicht/210720131344.jpg">/IMG_1562.JPG
Klar das der Apache sich daran verschluckt :D
Wie der Request zustande kommt, das musst du deine Skripte fragen ...
Maximale Erfolge!
PS: Versuche mal auch Umlaute in deinen Ordner und Dateinamen zu vermeiden, das ist für Webseiten meist besser
Das ist ja garnicht das Problem. Es funktioniert ja nun auch mit diesen Pfad ohne Änderung des Pfades.
Ich habe meine Frage vorhin ergänzt weshalb ich mir sicher bin das der Pfad so funktioniert und es nicht an den umlauten oder ähnlichem liegt.
Und die Umlaute sind da drin da ich das "Idioten sicher" versuche indem ich alles Variable halte sodass der Besitzer der Website einfach ohne drauf zu achten Bilder und Ordner an Bildern einfügen kann ohne Probleme.
Der Pfad müsste aber sein:
/stagelight/Image/FavStagelight/Bühnenlicht/210720131344.jpg ?
Oder
/stagelight/Image/FavStagelight/Bühnenlicht/IMG_1562.JPG ?
Du kannst doch keine '<' und '>' im Pfad in einem Verzeichnisnamen haben.
Richtig aber der richtige Pfad steht ja auch in den <img..> deswegen wundere ich mich ja auch und es funktioniert ja auch wenn ich den Teil mit Bildern in den Knöpfen raus kommentiere.
Vorschlag, wenn du beispielsweise Firefox verwendest.
Mit F12 bekommst du die Console aber auch den Debugger. Damit geht du Schritt für Schritt durch und wechselst zwischendurch auf die Console um zu sehen, welches Statement dir den Ärger macht.
In dem Pfad sollten keine < ... > stehen.
Die URLs zu den Bildern sollten nur wie in meinem vorigen Kommentar sein, ohne <img ... >
Chrome hat keinen solchen Debugger oder?
Und ich weiß nicht ob du meine Antwort mit dem Quellcode schon gesehen hast aber anhand dessen verstehe ich ja nicht woher diese Flasche URL überhaupt kommt.
URL ist eine Adresse ins Internet, Unified Resource Locator, so was wie: /stagelight/Image/FavStagelight/Bühnenlicht/IMG_1562.JPG
Ja das weiß ich ja aber ich verstehe nicht woher diese andere kommt da ja genau das selbe funktioniert wenn ich nur die Bilder aus den Galerie Knöpfen entferne also muss ja das eigentlich die Ursache dafür sein.
Ich sehe auch nicht, woher das andere kommt. Daher der Vorschlag mit dem Debugger in Firefox.
Ursächlich ist zu untersuchen, woher die URL, die du in deinem Kommentar mit "
[Mon Jul 19 23:22:12.615711 2021] [core:error] [pid 6440:tid 1816] (20024) ..." angegeben hast, her kommt.
Kurzer Exkurs,
wie würdest du denn die Bilder in die Buttons einbinden wenn ich dafür nh andere Lösung habe könnte ich den Fehler ja vllt auch ganz einfach um gehen da er ja scheinbar von den drei Zeilen welche die Bilder hinzufügen herauf beschwören wird
Ich würde kein <button> sondern <input type="button" ... > versuchen.
Hatte mal gelesen, dass <button> nicht mehr so genommen werden soll.
Außerdem würde ich erst mal die HTML-Datei schreiben, so wie sie durch JavaScript aufgebaut werden soll und diese korrekt darstellen. Da müssen dann alle Pfade fest gesetzt sein.
Das mit den Umlauten ist oft ein Knackpunkt mit vielen Problemen. Daher würde ich darauf im ersten Schritt verzichten. Wenn das dann läuft, kannst du dich an die Umlaut-Probleme machen.
Zwei oder mehr Probleme gleichzeitig geht selten gut.
Danke für's Kompliment.
Die Ruhe kann ich meistens halten. Es gibt aber auch Situationen, wo mir das nicht gelingt. Das ist aber selten.
Ich kann die HTML Seite aber nicht festschreiben da die Ordner nicht fest sind. Es werden immer wieder neue Ordner und Bilder hinzukommen weshalb es ja eben Variable sein soll und nicht jedes mal alles ergänzt werden muss.
(Ist für eine Veranstaltungstechniker welcher immer wieder neue Veranstaltungen hat und da auch Bilder macht um eben damit zu Werben )
Und es funktioniert ja mit den Umlauten grade.
Ja aber ich denke ich hab hier bestimmt schon das ein oder andere Dumme gesagt und auc wiederholt also einfach danke dafür.
Ich meinte auch nicht die ganze Liste an Bildern sondern vielleicht ein oder zwei.
Es geht nur um den HTML-Aufbau.
Die Seite hatte ich zuerst statisch aufgebaut und geguckt wie ich diese haben wollte und danach erst in JS konvertiert falls du das meinst
Also nochmal. Du erzeugst falsche Pfade, in denen ein komplettes IMG-Tag steckt. Die möchte Dein Apache nicht verarbeiten. Wie oben schon gesagt, das liegt an deinem Script.
Und zwar in diesen Zeilen:
but.innerHTML = data[i][0];
//var img = new Image(200,150);
//img.src = "../Image/FavStagelight/"+data[i][0]+"/"+data[i][1];
//but.appendChild(img);
Anscheinend ist in data[i][0] ein komplettes IMG-Tag. Und das lädst du schon mit dem innerHTML. Warum aber in deinen Screens mal oben und mal unten Bilder sind, das verstehe ich auch nicht.
Data ist eine Variable von mir selber(ja vllt ein wenig Falsch benannt) es ist auf jeden fall nur ein zweidimensionales Array und nicht das HTML Attribut data *~*
Ich wusste nicht wie ich das machen sollte und so hatte ich das davor mit der Galerie gemacht wo die Buttons quasi nur ein Bild sind welches auf Knopf druck dann groß wird.
Ich hinterlege mal den gesamten Code zu diesen Teil der Website als Antwort kleinen Moment