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

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

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

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

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

1. Axios のインストール

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

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

npm install axios --save

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

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

import axios from 'axios'

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

3. 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 サイトのアドレスを使用してリファラーリクエストヘッダーを設定する必要があります。

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