「XMLHttpRequest を読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません」エラーを解決する方法

アクセス制御が拒否されました: Web 開発における CORS のトラブルシューティング

問題:

ngResource を使用して REST API にアクセスする場合アマゾン ウェブ サービスでは、次のような問題が発生します。エラー:

XMLHttpRequest cannot load <url>. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<origin>' is therefore not allowed access.

原因:

この問題は、クロスオリジン リソース共有 (CORS) の制限によって発生し、1 つのドメイン上の Web アプリケーションがリクエストを行うことができなくなります。明示的なしで他のドメインへ

解決策:

CORS 問題に対処するには、複数のアプローチがあります:

1. CORS を無効にする:

• Chrome で、chrome://flags/#disable-web-security にアクセスします
• 「Web セキュリティを無効にする」を「有効」に設定します
• 注: このソリューションは開発のみに使用してください。目的。

2.ブラウザ プラグイン:

• CORS Unblock などの CORS チェックを無効にするブラウザ プラグインをインストールします。

3.プロキシ サーバー:

• クロスオリジン リクエストを処理するには、Nginx などのプロキシ サーバーを使用します。これにより、ブラウザはリクエストがローカルホストから送信されていると認識します。

4.サーバー構成:

• Access-Control-Allow-Origin ヘッダーを応答に追加するようにサーバーを構成します。サーバーに基づいた具体的な手順については、Enable CORS Web サイトを参照してください。

5. Promise を使用した HTTP の例:

const makeRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(options.method, url);
    request.setRequestHeader('Accept', 'application/json');

    request.onload = () => {
      if (request.status >= 200 && request.status < 300) {
        resolve(request.response);
      } else {
        reject({
          status: request.status,
          statusText: request.statusText
        });
      }
    };

    request.onerror = () => {
      reject({
        status: request.status,
        statusText: request.statusText
      });
    };

    request.send(options.body);
  });
};

以上が「XMLHttpRequest を読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません」エラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。