認証エラー：私は、社内の開発者のためのサービスとは異なる統計を引っ張っているリアクトアプリ構築しています

Question

を反応させるのでフェッチ使用して無CORSを（コミットは、時間などを追跡）..

私が使用しています時間を追跡するアプリHarvestからAPIデータを取得するために取得します。 their docsによれば、基本HTTP認証を使用できます。私が郵便配達郵便配達員を使用するとき、すべてが順調で、私は応答をちょうどよく見ることができます。最初は私が使用：

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 


    }) 
    } 

をこれが私のコンソールにエラーを与える：

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


    }) 
    } 

しかし、結果ということ認証エラー：

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

私はどのように正しく応答を得ることができないか分かりません。私は何か間違っているのですか？私の奇妙なのは、Postmanのアプリケーションを使用することはできますが、これはそうではありません。思考？ありがとう！

Answer 1

Harvest APIは、XHRやWebアプリケーションから取得するためのものではないようです。

少なくともtheir docsには、XHRまたはFetchからAPIを使用することについて何も言及されていません。これらのドキュメントには、Access-Control-Allow-OriginもCORSについても何も言及されていません。

代わりに、curlのAPIとPostman RESTクライアントとのAPIの使用例を示します。

以下のようなドキュメントで例を試してみると、レスポンスにはAccess-Control-Allow-Originがありません。

curl -H 'Content-Type: application/xml' -H 'Accept: application/xml' \ 
    -u "user@example.com:password" https://example.harvestapp.com/account/who_am_i 

答えは次のようです：WebアプリケーションからXHR/Fetchを使ってHarvest APIにアクセスすることはできません。

Postmanは、同じ発信元のポリシーブラウザが、ブラウザで実行されているWebアプリケーションが、発信元となるリクエストを作成しないように強制するため、Postmanで動作します。ただし、リクエストが送信されたサイト/エンドポイントでは、 CORS（ハーベストがオプトインしていないようだ）