응답 처리 - SyntaxError:모드 사용 시 예기치 않은 입력 종료: 'no-cors'

응답 처리 - SyntaxError:모드 사용 시 예기치 않은 입력 종료: 'no-cors'

리액트를 시도했다REST-API에 대한 JS의 호출을 가져오고 응답을 처리하려고 합니다.콜이 동작하고 응답이 있으면 Chrome Dev Tools에서 확인할 수 있습니다.

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

응답을 처리하려고 하면 "SyntaxError:예기치 않은 입력 종료"에 있습니다.

return response.json();

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

내 Response 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"
    }
  }
]

를 삭제해야 합니다.mode: 'no-cors'설정을 변경해 주세요.설정no-cors모드가 문제의 원인입니다.

A no-cors요청은 응답 유형을 만듭니다.opaque질문의 로그 스니펫을 보면 알 수 있습니다.불투명하다는 것은 프런트엔드 JavaScript 코드가 응답 본문 또는 헤더를 볼 수 없음을 의미합니다.

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

no-cors- JavaScript는 결과 속성에 액세스할 수 없습니다.Response

따라서 설정의 효과는no-cors모드는 기본적으로 브라우저에 "어떤 상황에서도 프런트엔드 JavaScript 코드가 응답 본문 또는 헤더에 액세스하지 않도록 합니다."라고 지시하는 것입니다.

사람들은 때때로 설정을 시도한다.no-cors응답에 다음이 포함되지 않은 경우 모드Access-Control-Allow-Origin요청은 CORS 프리플라이를 트리거하는 요청이기 때문에 브라우저는 응답 헤더 또는 그 외를 사용합니다.OPTIONS프리플라이트

단, 을 사용하여no-cors모드는 이러한 문제에 대한 해결책이 아닙니다.해결책은 다음 중 하나입니다.

• 요청 대상 서버가 다음 메시지를 전송하도록 구성합니다.Access-Control-Allow-Origin응답 헤더, 그리고 그것이 처리하도록OPTIONS요청한다

• 또는 https://github.com/Rob--W/cors-anywhere/ 등의 코드를 사용하여 CORS 프록시를 셋업합니다.REST API에서 데이터를 취득하려고 할 때 요청된 리소스에 "Access-Control-Allow-Origin" 헤더가 존재하지 않음에 대한 답변의 "No Access-Control-Allow-Origin header" 문제를 회피하는 방법 섹션을 참조하십시오.

고객님의 고객명then반환하기 전에 응답이 정상인지 확인해야 합니다.response.json:

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

이 답변이 매우 늦고 해결되었을 수 있다는 것을 알고 있습니다만, 오늘 같은 문제가 발생하여 헤더 해시 끝에 ''를 추가하면 에러가 표시되지 않게 됩니다.

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

다음 행을 php 헤더 또는 다른 서버 엔드포인트에 추가하면 CORS 정책에 문제가 발생하지 않도록 할 수 있습니다.

<?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
?>

POST 요청을 사용한 페치 코드 작동 모델은 다음과 같습니다.

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

다음 코드를 복사하여 web.config 파일에 붙여넣기만 하면 됩니다.<system.webServer>붙이다

<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>  

언급URL : https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input-when-using-mode-no-cors