Vue 開発で遭遇する問題と解決策

1: vue-cli のプロキシ プロキシがクロスドメインの問題を解決する

フロントエンド開発では、Ajaxリクエストとサーバーのソースが異なるため、Ajaxリクエストから返されたレスポンスがブラウザにインターセプトされ、エラーが報告されるという問題が避けられません。フロントエンド プロジェクト開発の進行に影響を与えるドメインの問題。私たちは開発中です。vue-cli を使用してプロキシを設定し、プロキシ サーバーを使用して Ajax リクエストを送信し、プロキシ サーバーを使用して Ajax リクエストを受け入れることができ、さまざまなソースでの問題を回避できます。

動作原理は次のとおりです

ダイレクトアクセスでクロスドメインが発生する場合、vue-cliをプロキシサーバーとして使用します。

  1. vue-cli スキャフォールディング ツールが起動すると、フロントエンド プロジェクトのサーバーが起動します。同じローカル エリア ネットワーク内のユーザーはすべて、IP アドレスを介してアクセスできます。
  2. vue-cli スキャフォールディングはプロキシの構成をサポートし、指定された種類のリクエストをターゲット サーバーに転送します。
  3. プロトコルのドメイン名とポートが統一されているため、プロキシサービスとフロントエンドサービス間のクロスドメインの問題がなく、リクエストを直接送信できます。
  4. プロキシサービスやバックエンドサービスはブラウザの同一オリジンポリシーの制限を通過しないため、リクエストを直接送信できます。

このようにして、サーバー プロキシを介してインターフェイスを転送し、開発環境でのクロスドメインの問題を解決できます。複雑に思えます。実際、vue-cli がこのテクノロジを構築してくれたので、構成するだけで済みます。要件に従って。

2: localstorage と cookie の違い

クッキーとは何ですか?

        Cookie は、Web サイトを閲覧するときに Web サーバーによってマシンのハード ドライブに保存される小さなテキスト ファイルです。ユーザー名、パスワード、閲覧したWebページ、滞在時間などが記録されます。この Web サイトに再度アクセスすると、Web サーバーはまず、前回 Web サイトに残された Cookie があるかどうかを確認します。存在する場合は、Cookie の内容を読み取ってユーザーを判断し、ページ上にウェルカムスローガンを表示したり、ID やパスワードを入力せずに直接ログインできるようにするなど、対応する Web コンテンツを送信します。

ローカルストレージとは何ですか?

localStorage は永続的なローカル ストレージであり、js を通じて削除されるか、ブラウザのキャッシュがクリアされない限り、データが期限切れになることはありません。

二人の役割(同点):

localStorage は、H5 におけるブラウザのローカル保存方法ですが、実際には Cookie 自体はサーバーの保存に使用されません。しかし、localStorage が登場する前は、Cookie がストレージ ツールとして悪用され、たとえこれらのデータがページ内でのみ使用され、リクエストとともにサーバーに送信される必要がなかったとしても、すべてのデータが Cookie 内に置かれていました (もちろん、 Cookie にもいくつかの制限があります (サイズ制限、ドメイン名ごとに生成される Cookie の数制限)。

違い:

許容される最大ストレージ容量

 1 つの Cookie の最大ストレージは 4K ですが、4K を超えるとストレージに失敗し、対応する Cookie 情報がブラウザで見つかりません。localStorage の
  最大ストレージは 5M です。この上限を超えると、ブラウザはエラーを表示します。

保管時間

Cookie はデフォルトでセッションレベルのストレージであり、有効期限を設定できます

localStorage は永続ストレージです。アクティブにクリアされない限り、削除されない限り常に存在します。

実現可能

Cookie は範囲、有効期限などを設定できます。

localStorage はデータの保存にのみ使用できます

4つの 利用シーン

Cookie の利用シーンは一般的にクライアントとサーバー間の情報伝達の一種であり、Cookie を追加するとデフォルトの同一オリジン Cookie 情報がリクエストヘッダーの一部としてサーバーに自動的に送信されます。

LocalStorage は通常、非同期リクエストの結果データを保存するなど、クライアント側のデータ ストレージとしてのみ使用され、ページが再レンダリングされるときにストレージ内のデータを直接読み取ることでリクエストの送信を減らすことができます。
 

おすすめ

転載: blog.csdn.net/weixin_71171795/article/details/128414588
おすすめ