2017-01-30 6 views
0

가 나는 우리의 내부 개발자 (커밋, 추적 시간 등)을위한 서비스에서 다른 통계를 당기고 응용 프로그램 반응 건물입니다 반작용 ..인증 오류시 모드를 사용하여 : 노 고르 인출 사용하지 않는에서

내가 사용하고 시간 추적 앱인 Harvest에서 API 데이터를 가져 오기 위해 가져옵니다. their docs에 따르면 기본 HTTP 인증을 사용할 수 있습니다. 앱 우체부를 사용할 때 모두 잘되고 응답이 잘 보입니다. 처음에 내가 사용 :

getHarvest(){ 
    // Set Harvest Headers 
    const harvestHeaders = { 
    method: 'GET', 
    mode: 'no-cors', 
    headers: { 
     'Authorization': 'Basic xxxxxxxxxxxxxxx=', 
     'Content-Type': 'application/json', 
     'Accept': 'application/json', 
     'Cache-Control': 'no-cache', 
    } 
    }; 

    fetch('https://factor1.harvestapp.com/projects/', harvestHeaders) 
    .then(response => response.json()) 
    .then(projects => { 

    // do stuff 


    }) 
    } 

그러나 결과 있음을 : 그래서 다음과 같이하는 내가 기능을 변경하는 피드백

Fetch API cannot load https://myaccount.harvestapp.com/projects/ . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

:

getHarvest(){ 
    // Set Harvest Headers 
    const harvestHeaders = { 
    method: 'GET', 
    headers: { 
     'Authorization': 'Basic xxxxxxxxxxxxxxx=', 
     'Content-Type': 'application/json', 
     'Accept': 'application/json', 
     'Cache-Control': 'no-cache', 
    } 
    }; 

    fetch('https://factor1.harvestapp.com/projects/', harvestHeaders) 
    .then(response => response.json()) 
    .then(projects => { 

    // Do some stuff 


    }) 
    } 

이 나에게 콘솔에 오류가 있습니다 인증 오류 :

GET https://myaccount.harvestapp.com/projects/ 401 (Unauthorized)

응답을 올바르게 가져올 수 있는지 잘 모르겠습니다. 내가 뭔가 잘못하고 있는거야? 그것은 나에게 이상한 것 애플 리케이션을 사용하여 우편 배달부 작동하지만 이것은하지 않습니다. 생각? 감사!

답변

1

Harvest API가 XHR 또는 웹 응용 프로그램에서 가져 오기와 함께 사용되는 것처럼 보이지 않습니다.

적어도 their docs은 XHR 또는 Fetch에서 API를 사용하는 것에 대해 언급하지 않았으며, 해당 문서에는 Access-Control-Allow-Origin 또는 CORS에 대한 내용이 전혀 나와 있지 않습니다.

대신 docs는 curl 및 Postman REST 클라이언트와 함께 API를 사용하는 예를 제공합니다.

아래의 문서에서 예제를 시도하면 응답에 Access-Control-Allow-Origin이 없습니다.

curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \ 
    -u "[email protected]:password" https://example.harvestapp.com/account/who_am_i 

답변 : 웹 응용 프로그램에서 XHR/가져 오기를 사용하여 수확 API에 액세스 할 수 없습니다.

Postman은 브라우저가 실행중인 웹 앱이 요청을 제출 한 사이트/엔드 포인트가 사용하도록 선택하지 않은 한 동일한 출처 정책 브라우저가 웹 앱 실행을 막도록 강제하기 때문에 Postman에서 작동합니다 CORS (Harvest가 선택하지 않은 것 같습니다).