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

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

PHPz

リリース： 2023-09-27 16:43:56

オリジナル

1649 人が閲覧しました

如何使用Nginx Proxy Manager实现跨域访问的授权管理

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

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

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.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 を起動できます:

sudo service nginx start

ログイン後にコピー

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

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

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 サイトの他の関連記事を参照してください。