vue はリクエストヘッダーリファラーを設定します-フロントエンドQ&A-php.cn

vue はリクエストヘッダーリファラーを設定します

WBOY

リリース： 2023-05-23 17:31:37

オリジナル

4757 人が閲覧しました

Vue は、開発者がインタラクティブなユーザーインターフェイスやシングルページアプリケーションを構築できるようにする人気の JavaScript フレームワークです。 Vue では、特にセキュリティが必要な場合、HTTP リクエストヘッダーリファラーの設定が非常に重要です。この記事では、Vue を使用してリクエストヘッダーリファラーを設定し、アプリケーションのセキュリティを確保する方法を紹介します。

HTTP リクエストヘッダーには、サーバーがクライアントによってリクエストされたリソースのタイプ、リクエストメソッド、およびリクエストのソースを理解できるようにするメタデータが含まれています。リファラーはメタデータの 1 つで、HTTP リクエストのソースアドレスを記録します。つまり、現在のリクエストがどの Web サイトまたはページリンクを指しているかをサーバーに伝えます。

多くの場合、サーバーにリクエストの送信元アドレスを知らせることが非常に重要です。たとえば、ユーザーが Web サイトにログインするとき、ユーザーが入力したユーザー名とパスワードが正しい Web サイトからのものであることを確認するために、サーバーはリクエストの送信元がどのページであるかを知る必要があります。

Vue アプリケーションでリファラーリクエストヘッダーを設定する手順は次のとおりです:

Axios のインストール

Axios は Promise ベースの HTTP です。ライブラリ。HTTP リクエストの送信と HTTP レスポンスの処理に使用されます。これは Vue で最も人気のある HTTP ライブラリの 1 つであり、HTTP リクエストヘッダーの設定をサポートしています。

Axios を使用するには、Vue アプリケーションに Axios をインストールする必要があります。次のように npm を使用して Axios をインストールできます:

npm install axios --save

ログイン後にコピー

Vue コンポーネントに Axios をインポート

Vue コンポーネントで Axios を使用するには、インポートコマンドを使用して、 import コンポーネントにインポートします。例:

import axios from 'axios'

ログイン後にコピー

これにより、Axios が取り込まれ、変数に保存され、コンポーネントで使用できるようになります。

Axios でリファラーリクエストヘッダーを設定する

リファラーリクエストヘッダーを設定するには、Axios の interceptors 属性を使用して HTTP リクエストをインターセプトします。 interceptors は、リクエストをインターセプトするメソッドと応答をインターセプトするメソッドの 2 つのメソッドを持つインターセプターオブジェクトです。リクエストインターセプターにリファラーリクエストヘッダーを設定する必要があります。

以下は、リファラーリクエストヘッダーを設定する方法のコードです:

axios.interceptors.request.use(config => {
  config.headers.referer = 'http://example.com'
  return config
})

ログイン後にコピー

上記のコードでは、request.use メソッドを使用してすべての HTTP リクエストをインターセプトし、コールバック関数が尋ねます。コールバック関数では、config.headers.referer プロパティ値を「http://example.com」に設定します。これにより、リファラーリクエストヘッダーが「http://example.com」に設定されます。

上記のコードは単なる例であることに注意してください。実際のアプリケーションでは、実際の Web サイトのアドレスを使用してリファラーリクエストヘッダーを設定する必要があります。

HTTP リクエストを送信してリファラーリクエストヘッダーを確認する

Axios でリファラーリクエストヘッダーを設定したので、Vue アプリケーションで HTTP リクエストを送信できます。、リファラーリクエストヘッダーが設定されているかどうかを確認します。

以下はサンプルコードです:

axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

ログイン後にコピー

上記のコードでは、Axios を使用して GET リクエストを http://example.com/api/data アドレスに送信し、ログに記録します。コンソール応答データ内。 Axios が HTTP リクエストを正常に送信し、レスポンスを取得した場合は、レスポンスヘッダー内のリファラーリクエストヘッダーを確認できます。リファラーリクエストヘッダーが正しく設定されている場合、コンソールにレスポンスヘッダー情報が表示されます。

概要

Vue アプリケーションでリファラーリクエストヘッダーを設定することは、CSRF 攻撃などの一般的な攻撃からアプリケーションを保護できるため、非常に重要です。 Axios は、Axios インターセプターを使用して HTTP リクエストをインターセプトするリファラーリクエストヘッダーを設定できる人気の HTTP ライブラリです。リファラー要求ヘッダーを設定するには、要求ヘッダーを config.headers.referer プロパティに追加し、例の「http://example.com」の代わりに実際の Web サイトのアドレスを使用する必要があります。最後に、HTTP リクエストを送信し、リファラーリクエストヘッダーが正しく設定されているかどうかを確認する必要があります。

以上がvue はリクエストヘッダーリファラーを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。