vue forwarding 200 ステータスコードを解決する方法

Vue は人気のあるフロントエンド開発フレームワークです。フロントエンドとバックエンドの分離の傾向に伴い、フロントエンド アプリケーションの構築に Vue を使用する開発者が増えています。200 ステータス コードの転送は一般的な問題ですVue 開発で遭遇した質問。以下、この問題について詳しく見ていきましょう。

まず、Vue がバックエンドにリクエストを送信すると、サーバーは HTTP ステータス コードを返し、Vue にリクエスト処理の結果を通知することを明確にする必要があります。 HTTP ステータス コードは、HTTP プロトコルのステータス インジケータであり、リクエストの結果が成功、失敗、リダイレクトなどであるかどうかをクライアントに伝えます。

Vue では、一般的なリクエスト メソッドには GET、POST、PUT、DELETE などが含まれます。これらのメソッドのリクエスト ステータス コードは異なります。一般的なステータス コードは 200、201、204、400、401、404 、500 です。 、など。このうち、ステータス コード 200 は、サーバーがリクエストを正常に処理したことを示します。ステータス コード 200 を転送するということは、何らかの理由でバックエンドから返されるステータス コードを強制的に 200 にする必要があることを意味します。

なぜステータス コード 200 を転送する必要があるのでしょうか?実際のプロジェクト開発では、クロスドメインリクエストの問題に遭遇することがありますが、クロスドメインリクエストを行う際、通常ブラウザはOPTIONSプリフライトリクエストを開始して、どのHTTPメソッドやヘッダ情報などが使​​用できるかを判断します。

バックエンドが OPTIONS リクエストを処理せず、200 以外のステータス コードを直接返した場合、ブラウザはそれをインターセプトし、クロスドメイン リクエストを禁止します。この場合、ブラウザのインターセプトを回避するには、バックエンドから返されるステータス コードを 200 に変更する必要があります。

Vue で 200 ステータス コードを転送するにはどうすればよいですか? Vue は、axios インターセプターを通じてバックエンドから返されるステータス コードを 200 に変更するメソッドを提供します。

具体的には、データを返す前に戻り結果を処理するインターセプターを axios に追加し、バックエンドによって返されるステータス コードを強制的に 200 に設定できます。コードは次のとおりです。

import axios from 'axios';

axios.interceptors.response.use(response => {
  if (response.config.url !== '/login' && response.status !== 200) {
    response.status = 200;
  }
  return response;
}, error => {
  return Promise.reject(error);
});

このコードでは、axios.interceptors.response.use メソッドを通じてインターセプターを追加し、バックエンドから返されたデータを処理します。まず、現在要求されている URL がログイン要求であるかどうかを判断し、ログイン要求でない場合はステータスコードを強制的に 200 に変更して処理結果を返します。

最後に、200 ステータス コードの転送は単なる解決策であることに注意してください。バックエンドが OPTIONS リクエストを処理し、ステータス コードを正しく返すことができる場合は、ステータス コードを転送する必要はありません。

プロジェクト開発では、無用なトラブルを避けるために、実際の状況に基づいて適切なソリューションを選択する必要があります。 Vue インターセプターを介して 200 ステータス コードを転送すると、ブラウザーのクロスドメインの問題を解決できますが、悪影響を避けるためにプロジェクトで使用する場合は注意が必要です。

以上がvue forwarding 200 ステータスコードを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。