Handle Response - SyntaxError: Unerwartetes Ende der Eingabe

Question

Ich habe versucht, einen ReactJS Abruf an eine REST-API abrufen und die Antwort behandeln möchten. Der Aufruf funktioniert, ich eine Antwort erhalten, die ich in Chrome Dev-Tool sehen:

function getAllCourses() { 
fetch('http://localhost:8080/course', { 
    method: 'POST', 
    mode: 'no-cors', 
    credentials: 'same-origin', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     objectClass: 'course', 
     crud: '2' 
    }) 
}).then(function (response) { 
    console.log(response); 
    return response.json(); 

}).catch(function (err) { 
    console.log(err) 
}); 
} 

Wenn ich versuche, die Antwort zu handhaben, ich habe einen „Syntaxerror: unerwartetes Ende der Eingabe“ bei

return response.json(); 

Die console.log sieht wie folgt aus:

JSON Meine Antwort wie folgt aussieht, ist es gültig, ich habe es mit jsonlint:

[ 
    { 
    "0x1": { 
     "users": [], 
     "lectures": [], 
     "owner": "0x2", 
     "title": "WWI 14 SEA", 
     "description": null, 
     "objectClass": "course", 
     "id": "course_00001" 
    }, 
    "0x2": { 
     "username": "system", 
     "lectures": [], 
     "course": null, 
     "solutions": [], 
     "exercises": [], 
     "roles": [ 
     "0x3", 
     "0x4", 
     "0x5" 
     ], 
     "objectClass": "user", 
     "id": "user_00001" 
    }, 
    "0x3": { 
     "roleName": "ROLE_ADMIN", 
     "objectClass": "role", 
     "id": "role_00001" 
    }, 
    "0x4": { 
     "roleName": "ROLE_STUDENT", 
     "objectClass": "role", 
     "id": "role_00002" 
    }, 
    "0x5": { 
     "roleName": "ROLE_DOCENT", 
     "objectClass": "role", 
     "id": "role_00003" 
    } 
    } 
] 

Answer 1

Sie müssen die Einstellung mode: 'no-cors' aus Ihrer Anfrage entfernen. Das mode: 'no-cors' ist genau die Ursache für das Problem, das Sie haben.

Eine mode: 'no-cors' Anfrage stellt den Antworttyp opaque. Das Konsolenprotokoll-Snippet in der Frage zeigt dies deutlich. Und opaque bedeutet, dass Ihr Frontend-JavaScript-Code keinen Teil der Antwort sehen kann und nichts damit zu tun hat.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode erklärt:

no-cors — JavaScript may not access any properties of the resulting Response

So ist die Wirkung der Einstellung mode: 'no-cors' im Wesentlichen Browser zu sagen ist,

I „nicht das Frontend JavaScript-Code Zugriff ließ die Reaktion unter keinen Umständen.“ Stellen Sie sich vor, Sie setzen mode: 'no-cors' für die Anfrage, weil die Antwort von http://localhost:8080/course nicht die Antwort Access-Control-Allow-Origin Header enthält oder weil Ihr Browser eine OPTIONS Requests macht t zu http://localhost:8080, weil Ihre Anfrage eine ist, die eine CORS preflight auslöst.

Aber Einstellung mode: 'no-cors' ist nicht die Lösung für diese Probleme. Die Lösung ist entweder:

• configure die http://localhost:8080 Server die Access-Control-Allow-Origin Antwort-Header zu senden und die OPTIONS Anfrage

• oder richten Sie eine CORS-Proxy-Code von https://github.com/Rob--W/cors-anywhere/ oder solche

zu handhaben

Answer 2

In Ihrem then sollten Sie überprüfen, ob die Antwort OK ist response.json vor der Rückkehr:

.then(function (response) { 
    if (!response.ok) { 
     return Promise.reject('some reason'); 
    } 

    return response.json(); 

}) 

Wenn Sie die Fehlermeldung in Ihrem abgelehnt Versprechen haben wollen, können Sie so etwas wie:

.then(function (response) { 
    if (!response.ok) { 
     return response.text().then(result => Promise.reject(new Error(result))); 
    } 

    return response.json(); 
})