[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか？

質問

モッドノート : この質問は、「なぜ XMLHttpRequest / fetch ブラウザ上の/etc.はSame Access Policyの制限を受けますが（CORBやCORSに言及したエラーが出ます）、Postmanはそうではありません。この質問は ではなく No 'Access-Control-Allow-Origin'..." エラーを修正する方法についてです。なぜこのようなエラーが発生するのかについてです。

投稿を中止してください :

• あらゆる言語/フレームワークのCORS設定。代わりに 該当する言語/フレームワークの質問を探す .
• CORS を回避するリクエストを許可するサード パーティ製サービス
• 各種ブラウザのCORSをオフにするコマンドラインオプション

を使用して認証を行おうとしています。 JavaScript に接続することで RESTful API 組み込み フラスコ . しかし、リクエストを行うと、以下のようなエラーが発生します。

XMLHttpRequest は http://myApiUrl/login を読み込むことができません。要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン 'null' はアクセスを許可されていません。

APIやリモートリソースがヘッダを設定しなければならないのはわかるのですが、Chromeの拡張機能を使ってリクエストしたときにうまくいったのはなぜでしょうか。 ポストマン ?

これがリクエストコードです。

$.ajax({
  type: 'POST',
  dataType: 'text',
  url: api,
  username: 'user',
  password: 'pass',
  crossDomain: true,
  xhrFields: {
    withCredentials: true,
  },
})
  .done(function (data) {
    console.log('done');
  })
  .fail(function (xhr, textStatus, errorThrown) {
    alert(xhr.responseText);
    alert(textStatus);
  });

解決方法は？

私の理解が正しければ、あなたは XMLHttpRequest を、あなたのページとは異なるドメインに送信します。そのため、ブラウザはセキュリティ上の理由から、通常は同じオリジンでのリクエストを許可するため、ブロックしているのです。クロスドメインリクエストを行いたい場合は、別の方法を取る必要があります。それを実現する方法についてのチュートリアルは CORSを利用する .

Postmanを使用しているときは、このポリシーの制限を受けません。引用元 クロスオリジン XMLHttpRequest :

通常の Web ページは、XMLHttpRequest オブジェクトを使用してリモート サーバーとデータを送受信することができますが、同じオリジン ポリシーによって制限されています。拡張機能はそれほど制限されていません。拡張機能は、最初にクロスオリジンのパーミッションを要求する限り、オリジン以外のリモートサーバと通信することができます。