Nginx Proxy Managerを使用してクロスドメインアクセスの認可管理を実装する方法

Nginx Proxy Manager を使用してクロスドメイン アクセスの承認管理を実現する方法

Nginx Proxy Manager は、リバース プロキシ、負荷分散、および SSL /TLS ターミナル プロキシおよびその他の機能。実際のアプリケーションでは、フロントエンドのクロスドメイン アクセスで問題が発生することが多く、バックエンドのリソースを保護するために承認管理を行う必要があります。この記事では、Nginx Proxy Manager を使用してクロスドメイン アクセスの承認管理を実装する方法を紹介し、いくつかの具体的なコード例を示します。

1. Nginx Proxy Manager のインストールと構成
   まず、Nginx Proxy Manager をインストールして構成する必要があります。次の手順に進むことができます。

1.1 Nginx Proxy Manager をインストールする
公式 Web サイトまたはその他のチャネルを通じて Nginx Proxy Manager のインストール パッケージをダウンロードし、公式の手順に従ってインストールできます。ドキュメンテーション。

1.2 Nginx Proxy Manager の構成
インストールが完了したら、Nginx Proxy Manager を構成する必要があります。構成ファイルは通常、/etc/nginx/nginx.conf にあり、テキスト エディターを使用してファイルを開いて構成できます。

2. クロスドメイン アクセス承認管理の構成
   次に、クロスドメイン アクセス承認管理を構成します。具体的な設定は次のとおりです。

2.1 クロスドメイン アクセスの認可ルールを定義する
Nginx Proxy Manager の設定ファイルでは、location ディレクティブを使用してクロスドメイン アクセスの認可ルールを定義できます。ドメインアクセス。たとえば、次の方法で特定のドメイン名にクロスドメイン アクセスを許可するルールを定義できます。

location /api {
  add_header 'Access-Control-Allow-Origin' 'http://example.com';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
  add_header 'Access-Control-Allow-Credentials' 'true';
}

上の例では、## を使用してクロスドメイン アクセス用の認証ヘッダーを追加しました。 #add_header ディレクティブ フィールド。このうち、Access-Control-Allow-Origin フィールドはクロスドメイン アクセスを許可するドメイン名を指定し、Access-Control-Allow-Methods フィールドは許可される HTTP メソッドを指定します。 Access -Control-Allow-Headers フィールドは、許可される HTTP ヘッダー フィールドを指定します。Access-Control-Allow-Credentials フィールドは、クロスドメイン アクセスでの Cookie の送信を許可するかどうかを指定します。 。

2.2 クロスドメイン アクセスのエラー処理を構成する

セキュリティを向上させるために、クロスドメイン アクセスの承認ルールが一致しない場合に、特定のエラー情報を返すように Nginx Proxy Manager を構成できます。たとえば、返される 403 Forbidden エラーを次の方法で設定できます。

location /api {
  if ($http_origin != http://example.com) {
    return 403;
  }
}

上の例では、

if ディレクティブを使用して、ドメイン名がクロスドメイン アクセス用かどうかを判断します。要件を満たしています。要件が満たされていない場合は、403 エラーが返されます。

Nginx Proxy Manager の実行
3. 構成が完了したら、次のコマンドで Nginx Proxy Manager を起動できます:
   

sudo service nginx start

この時点で、Nginx Proxy Managerは設定ポートのリッスンを開始し、設定されたクロスドメイン アクセス許可ルールに従って処理します。

フロントエンド コードの例
4. 最後に、クロスドメイン アクセスを実行する方法を示す簡単なフロントエンド コードの例を示します。具体的な例は次のとおりです。
   

const url = 'http://api.example.com';
const headers = {
  'Authorization': 'Bearer xxxxxxxx',
  'Content-Type': 'application/json'
};

fetch(url, {
  method: 'GET',
  headers: headers,
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

上の例では、

fetch 関数を使用して、クロスドメイン アクセスの GET リクエストを送信します。このうち、url 変数はクロスドメイン アクセスのターゲット URL を指定し、headers 変数はリクエストの HTTP ヘッダー フィールドを指定し、credentials パラメータはクロスドメイン アクセス用に Cookie を送信するかどうか。ドメイン アクセス。

概要:

この記事では、Nginx Proxy Manager を使用してクロスドメイン アクセスの承認管理を実装する方法を紹介し、いくつかの具体的なコード例を示します。 Nginx Proxy Manager のクロスドメイン アクセス ルールを構成することで、バックエンド リソースへのアクセスを柔軟に制御し、システムのセキュリティを保護できます。この記事が読者のお役に立てれば幸いです。

以上がNginx Proxy Managerを使用してクロスドメインアクセスの認可管理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。