핸들 응답 - SyntaxError : 예기치 않은 입력의 끝

Question

REST-API에 대한 ReactJS 페치 호출을 시도하고 응답을 처리하려고합니다. 콜 작품, 내가 크롬 개발 도구에서 볼 수있는 응답 얻을 :

return response.json(); 

에서 :

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) 
}); 
} 

을 내가 응답을 처리 할 때를, 나는 "입력의 예기치 않은 종료 구문 에러"를 가지고

을 console.log는 다음과 같습니다

JSON은 다음과 같습니다

내 응답이 유효한지, 내가 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

요청에서 mode: 'no-cors' 설정을 제거해야합니다. 그 mode: 'no-cors' 정확히 당신이 가진 문제의 원인입니다.

mode: 'no-cors' 요청은 응답 유형 opaque이됩니다. 문제의 콘솔 로그 스 니펫은이를 분명하게 보여줍니다. opaque은 프론트 엔드 자바 스크립트 코드가 응답의 일부를 보거나 아무 것도 할 수 없음을 의미합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode 설명 :

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

그래서 mode: 'no-cors' 설정의 효과가 , 브라우저에게 본질적으로

I "를 프론트 엔드 자바 스크립트 코드 액세스 어떠한 경우에도 응답을하지 마십시오." http://localhost:8080/course의 응답에 Access-Control-Allow-Origin 응답 헤더가 없거나 브라우저가 OPTIONS 요청을 작성했기 때문에 요청에 대해 mode: 'no-cors'을 설정한다고 가정 해 보겠습니다. t를 http://localhost:8080으로 변경하십시오. 귀하의 요청이 CORS preflight을 유발하는 요청이기 때문입니다.

그러나 mode: 'no-cors'으로 설정하는 것은 이러한 문제의 해결책이 아닙니다.

• 가 구성 http://localhost:8080 서버가 Access-Control-Allow-Origin 응답 헤더를 전송하고 OPTIONS 요청을

• 을 처리하거나 https://github.com/Rob--W/cors-anywhere/ 또는

에서 코드를 사용하여 CORS 프록시를 설정 :이 솔루션은 하나에 있습니다

Answer 2

당신의 then 당신은 response.json을 반환하기 전에 응답이 OK 있는지 확인해야합니다

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

    return response.json(); 

}) 

당신이 당신의 거부 약속 오류 메시지를 원한다면, 당신은 같은 것을 수행 할 수 있습니다

을

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

    return response.json(); 
})