web-dev-qa-db-de.com

Antwort bearbeiten - SyntaxError: Unerwartetes Ende der Eingabe bei Verwendung des Modus: 'no-cors'

Ich habe einen ReactJS-Abrufaufruf an eine REST-API ausprobiert und möchte die Antwort bearbeiten. Der Anruf funktioniert, ich bekomme eine Antwort, die ich in Chrome Dev Tools sehen kann:

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, mit der Antwort umzugehen, habe ich ein "SyntaxError: Unerwartetes Ende der Eingabe" erhalten

return response.json();

Das console.log sieht folgendermaßen aus:

 Console.log(response)

Meine Antwort JSON sieht so aus, es ist gültig, ich habe es mit jsonlint überprüft:

[
  {
    "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"
    }
  }
]
17
Chilliggo

Sie müssen die Einstellung mode: 'no-cors' aus Ihrer Anfrage entfernen. Dieser mode: 'no-cors' ist genau die Ursache des Problems, das Sie haben.

Eine mode: 'no-cors'-Anforderung macht den Antworttyp opaque. Das Konsolenprotokoll-Snippet in der Frage zeigt dies deutlich. Und opaque bedeutet, dass Ihr Frontend-JavaScript-Code den Antworttext oder die Header nicht sehen kann.

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

no-cors - JavaScript darf nicht auf die Eigenschaften der resultierenden Response zugreifen.

Durch die Einstellung von mode: 'no-cors' wird den Browsern also im Wesentlichen mitgeteilt, dass "Frontend-JavaScript-Code unter keinen Umständen auf den Antworttext oder die Header zugreifen darf."

Ich stelle mir vor, Sie setzen mode: 'no-cors' für die Anfrage, weil die Antwort von http://localhost:8080/course nicht den Access-Control-Allow-Origin-Antwortheader enthält oder weil Ihr Browser eine OPTIONS-Anforderung an http://localhost:8080 stellt, da Ihre Anfrage eine CORS Preflight auslöst.

Die Einstellung von mode: 'no-cors' ist jedoch keine Lösung für diese Probleme. Die Lösung ist entweder:

38
sideshowbarker

In Ihrer then sollten Sie prüfen, ob die Antwort in Ordnung ist, bevor Sie response.json zurückgeben:

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

    return response.json();

})

Wenn Sie die Fehlermeldung in Ihrem abgelehnten Versprechen haben möchten, können Sie Folgendes tun:

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

    return response.json();
})
2
Kmaschta

Ich weiß, dass diese Antwort sehr spät ist und möglicherweise gelöst wurde, aber ich hatte heute nur das gleiche Problem und ich musste nur ein ',' am Ende des Headers-Hash hinzufügen, und ich hörte auf, den Fehler zu erhalten

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: 'POSTING_CONTACTS'});
    console.log(formData)
    return fetch(uri, {
      method: 'POST',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: 'ADD_CONTACT', payload: responseJSON});
      })
  }
}     

Kopieren Sie einfach den folgenden Code und fügen Sie ihn unter <system.webServer>-Tag in Ihre Datei web.config ein.

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>  
0
Juboraj Sarker

Sie können das Problem mit der CORS-Richtlinie vermeiden, indem Sie im Header von PHP oder einem anderen Server-Endpunkt die Zeile hinzufügen:

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

Das Modell für den Funktionsabrufcode mit der Anforderung POST lautet:

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});
0
Roman