2017-05-03 10 views
3

Google API에서 데이터를 가져 오려고합니다. API는 CORS 지원을 활성화하고, 옵션 요청에 대한 응답으로 아래에 반환했습니다 :이 API는 'application/json' 이외의 'Content-type' 것을 허용하지 않습니다React Native - OPTIONS 응답 후 CORS로 가져 오기 API 작동하기

Access-Control-Request-Headers:content-type 
Access-Control-Allow-Origin:* 

.

이 제한을 사용하여 데이터를 얻기 위해 fetch React-Native 방법을 사용하려고합니다.

방법 1 (무 고르) :이 방법

{ 
    method: 'POST', 
    mode: "no-cors", 
    headers: { 
     'content-type': 'application/json' 
} 

는 브라우저 자동 "텍스트/플레인 '와 같은 콘텐츠 유형을 전송한다. 왜냐하면 CORS는 기본적으로 3 개의 헤더 중 하나만 허용하기 때문입니다. 그러나 서버가이 content-type을 지원하지 않으므로 지원되지 않는 내용 유형에 대해 오류가 반환됩니다. (아무것도 고르 또는과)

방법 2 :이 시나리오에서는

{ 
    method: 'POST', 
    mode: "cors", // or without this line 
    redirect: 'follow', 
    headers: { 
     'content-type': 'application/json' 
    } 
} 
... 
.then(response => console.log(response)) 

, 크롬의 F12 네트워크 도구를 사용하여, 나는 서버 반환 데이터를 볼 수 있습니다 : 서버에 첫 번째 요청이 fetch입니다 OPTIONS입니다. 여기에서 서버는 위의 헤더 세트와 함께 빈 오브젝트로 응답합니다. 다음 호출은 서버가 실제 데이터를 포함하는 적절한 JSON 응답으로 응답하는 실제 POST API 호출입니다. 그러나 내 코드를 통해 콘솔에 올라 오는 응답은 {}입니다. 반응 fetch API가 실제 POST 호출 대신 OPTIONS 호출의 응답을 되 돌리려고하기 때문입니다.

OPTIONS 요청의 응답을 무시하고 then 메서드를 사용하여 후속 요청의 응답을 처리 할 수 ​​있습니까?

답변

5

당신이 치는 즉각적인 문제는 현재 작성된 코드가 응답이 JSON이 될 것으로 기대하지만 실제로 응답은 JSON을 얻기 위해 처리해야하는 약속입니다.

fetch("https://example.com") 
    .then(response => response.json()) 
    .then(jsondata => console.log(jsondata)) 
:

그래서 대신 같은 것을 할 필요가