web-dev-qa-db-ja.com

Postmanからは機能するがブラウザからは機能しない基本認証を使用したGETリクエスト

私はodata apiを使用しています。postmanを使用してGETリクエストを実行すると、完璧に動作し、期待どおりの応答が得られます。 Postman Request

しかし、私のReactアプリからのフェッチ要求を使用すると、その要求は、以前にPostmanで使用したものと同じヘッダーを使用して401をスローし、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 401.

このリクエストを解決する方法について何か考えはありますか？ありがとう！

fetch('https://api4.successfactors.com/odata/v2/', {
  method: 'GET',
  headers: {
    authorization: `Basic ${auth}`, //auth is the encoded base64 username:password
  },
})
  .then(response => response.json())
  .then((response) => {
    console.log('in response: ', response);
  })
  .catch((error) => {
    console.log('in fetchJobs error: ', error);
  });

これは私が手にしている401です... enter image description here

javascriptgetrequestodatafetch
5
JC Garcia

これは、PostmanがおそらくOptionsの前にプリフライトGETリクエストを送信しておらず、GET応答の受信時にCORSチェック（それはとにかく本当に意味をなさないからです）。

一方、ウェブページからコードを実行する場合Chromeは、リモートサーバーへの送信が許可されているクロスドメインリクエストパラメータを確認するために、どちらもプリフライトOptionsを実行しています。 Options reqへの応答に、Origin（リクエスト元のページのドメイン）を承認するための適切なAccess-Control-Allow-Originヘッダーが付いているかどうかを確認します。

通常、プリフライトOptionsはブラウザーによってサーバーに送信され、サーバーが実行しようとしている操作の実行を許可されているかどうかがサーバーに尋ねられます。この場合はGETです。リモート（クロスドメイン）サーバーがOptionsを承認する応答の正しいヘッダーでprelight GET要求に応答しない場合、ブラウザーはそれを送信しません。ただし、Optionsリクエストへの応答自体がcors Originチェックに合格しないため、それほど遠くまで届きません。

サーバーを制御している場合は、Optionsリクエストに応答するために、レスポンスのAccess-Control-Allow-Originヘッダーを設定してOriginリクエストに応答する必要があります。また、 Access-Control-Allow-MethodsにはGETを含めます（おそらくOPTIONS）。リモートサーバーを制御しない場合は、ヒットしようとしているサービスなどの通常のAPIサービスのバックエンドに、Originを認証するためにどこかに設定できる構成がある可能性があります。

あなたはcorsの動作についてもっと読むことができます here

5
Rhys

理想的な方法は、サーバーで別のドメインからの呼び出しを許可することですが、バックエンドへのアクセスとテストサービスがない場合は、このchromeプラグインをインストールして事前にバイパスできます-フライトリクエスト cors chrome extension

0
RohitAneja

CORSの問題が発生しています。問題を回避するには、バックエンドでCORSを有効にする必要があります。

0
Mike Tung