• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fehlermeldung: TypeError: NetworkError when attempting to fetch resource - Nur in Firefox und Chrome Handy App

HenryChinaski

Neues Mitglied
Hallo Leute,

ich bin Anfänger in Webdevelopment und habe eine Website Programmiert, auf der man Bilder hochladen kann. Für das Hochladen verwende ich PHP und in Javascript fetch() um den POST Befehl und die Datei an PHP zu übertragen. Hier der Code:

Javascript:
const formData = new FormData();

formData.append('fileToUpload', toBeUploadedImg);

const url = 'upload.php?tic=' + userID + '&que=' + currentQuestion[0];
const request = new Request(url, {
    method: 'POST',
    body: formData
});

fetch(request)

PHP:
<?php
error_reporting(-1);
ini_set('display_errors', true);

$target_dir = "../image/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  
  
    $newfilename = 'I_' . $_GET['que'] . '_' . $_GET['tic'] . '.' . $imageFileType;
      
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_dir . $newfilename)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

Direkt nach dem fetch() Befehl wird der Nutzer auf eine zweite Seite mit dem selben Script geleitet.
Das ganze funktioniert in Chrome und Edge perfekt. In Firefox erhalte ich jedoch auf der ersten Seite die Fehlermeldung:
"TypeError: NetworkError when attempting to fetch resource",
auf der zweiten Seite jedoch nicht. Dort wird das Bild auch korrekt hochgeladen, für die erste Seite erhalte ich nichts.
Gleiches gilt für meine Chrome App auf dem Handy, nur dass ich dort keinen Debug Log gefunden habe um zu schauen welcher Fehler kommt. Auf iOS geht es scheinbar gar nicht, dort bekomme ich weder das erste, noch das zweite Bild.

Als Anfänger bin ich davon natürlich sehr frustriert - besonders weil ich dachte ich sei durch. Eine Recherche hat eine Vielzahl an Informationen
ergeben, aber keine wirkliche Lösung bisher. Meine Frage ist daher, ob jemand das Problem kennt oder zumindest einordnen kann, wie ich
weiter vorgehen könnte um das Problem einzugrenzen. Unser Server wird von der Uni bereitgestellt, womöglich ist da eine Einstellung falsch gesetzt?

Bin dankbar für jede Hilfe.
 
Zuletzt bearbeitet:
Werbung:
Also der Mann, der sich um den Server kümmert meint, dass alle Einstellungen richtig gesetzt sind.
Der fetch() befehl wird auch definitiv von Firefox unterstützt.
 
Werbung:
Mit der cors ist immer so ne Sache. Wenn der Browser denkt das es nicht der selber Server ist oder sonst was kann es schon nicht mehr gehen. Ich hatte einmal Glück und konnte so ein Fehler mit der kompletten url behehen anstatt nur Upload/ usw . Aber nur in Javascript . Ob es bei dir hilft kein Plan
 
Gute Frage. An der Fetch-API sollte es nicht liegen. Die funktioniert in aktuellen Browsern.

Was du tun könntest, um das Problem einzugrenzen:

Das PHP-Script vereinfachen. Für Testzwecke reicht ein echo "Hello World!".

Den POST-Request mit einem Tool wie Postman testen:
https://www.getpostman.com/

Dir in den Dev-Tools deines Browsers anschauen, ob der Request einen -Error erzeugt. Die CORS-Einstellungen werden im Header des Request angezeigt.

Für Chrome gibt es eine CORS-Extension. Keine Ahnung, ob so etwas auch für Firefox verfügbar ist.

Debuggen auf einem Android Smartphone geht so:
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
 
Zurück
Oben