WebApi のクロスドメイン セカンダリ リクエストと Vue の単一ページの問題を Nginx がどのように解決するか
1. はじめに
プロジェクトがフロントエンドとバックエンドに分離されているため、API インターフェイスと Web フロントエンドは別のサイトにデプロイされているため、前回の記事では、 webapi ajax クロスドメイン リクエスト ソリューション (cors 実装) は、jsonp の代わりにクロスドメイン処理を使用します。
しかし、しばらくすると、非常に奇妙な問題が見つかりました。フロントエンドがリクエストを開始するたびに、ブラウザの開発者ツールを通じて、ネットワーク上に同じ URL に対する 2 つのリクエストがあることがわかります。 1 つ目のリクエストのメソッドは options で、2 つ目のリクエストのメソッドは real get または post で、1 つ目のリクエストはデータを返さず、2 つ目のリクエストは通常のデータを返します。
2. 理由
最初のオプション要求は、クロスドメイン アクセスを処理する Web サーバーによってトリガーされます。オプションはプリフライト リクエストです。ブラウザがクロスドメイン アクセス リクエストを処理するとき、リクエストが複雑なリクエストであると判断した場合、ブラウザはまずサーバーにプリフライト リクエストを送信します。サーバーから返されたコンテンツに基づいて、ブラウザはサーバーがアクセスを許可するかどうかはリクエストによって決まります。 Web サーバーが CORS を使用してクロスドメイン アクセスをサポートしている場合、複雑なリクエストを処理するときにこのプリフライト リクエストは避けられません。
私たちの Web サーバーは cors を使用してクロスドメイン アクセスの問題を解決し、同時にヘッダーにカスタム パラメーターを追加し、データのやり取りに json 形式を使用しているため、それぞれのリクエストは複雑なリクエストになります。その結果、各リクエストに対して 2 つのリクエストが送信されます。
理由は次のとおりです:
cors を使用してクロスドメインの問題を解決する
3. 解決策
3.1 nginx
3.1.1 アイデア
フロントエンド プロジェクトを nginx にデプロイし、クロスドメイン リクエストの問題を解決します。 proxy
3.1.2 実装
3.1.2.1 nginx のインストール
Windows に nginx をインストールし、ダウンロードするのが最も簡単です。圧縮パッケージを直接展開し、解凍後
3.1.2.2 nginx
の設定には独自のデフォルト設定があります。 angular で、index.html をパッケージ化します。ファイルと dist ディレクトリをリリース ディレクトリに置き、パスをコピーし、それを使用して、次のように
構成ファイルを指すように nginx サービスを構成します。
3.1.2.3 nginx の一般的なコマンド
開始: start nginx設定をリロード: nginx -s reloadログ ファイルを再度開きます: nginx -s restart構成ファイルが正しいかどうかをテストします: nginx -t [オプション: パスを指定]クイック停止: nginx -s stop順序どおりに停止: nginx -s quit##3.1.3 nginx シングル ページ アプリケーション h5 履歴 URL 書き換え##サポート
vue、angular、react
理由
単一ページを実装する場合、ページを更新するとページが見つからなくなるため、URLアドレスをindex.htmlに書き換える必要があります。
注意事項
nginx で URL 書き換えを使用すると、常に次のエラーが報告されます
確認後、 if と ( の間にはスペースが必要であることがわかりました。
3.2 その他
##3.2.1 アイデア
プリフライト リクエストを送信するときに、プリフライト リクエストの数を減らすことはできますか?#たとえば、有効期間を設定すると、有効期間中はプリフライトが繰り返されなくなります。
3.2.2 実装
この問題を解決するには、サーバー上でプリフライトが完了した後に access-control-max-age リクエスト ヘッダーを追加できます。3.2 .3 cors 応答フィールドの説明
access-control-allow-methodsこのフィールドは必須です。その値は、サポートされているすべてのクロスドメイン リクエスト メソッドを示すカンマ区切りの文字列です。
ブラウザによって要求されたメソッドだけでなく、サポートされているすべてのメソッドが返されることに注意してください。これは、複数の「プリフライト」リクエストを避けるためです。access-control-allow-headersブラウザリクエストに access-control-request-headers フィールドが含まれる場合、access-control-allow-headers フィールドが必要です。これは、サーバーがサポートしていることを示すカンマ区切りの文字列でもあります。 「プリフライト」でブラウザによって要求されたフィールドに限定されない、すべてのヘッダー情報フィールド。access-control-allow-credentialsこのフィールドは、単純なリクエストの場合と同じ意味を持ちます。 access-control-max-ageこのフィールドはオプションであり、このプリフライト リクエストの有効期間を秒単位で指定するために使用されます。上記の結果では、有効期間は 20 日です (つまり、応答は 1,728,000 秒 (つまり 20 日間) キャッシュされることが許可されます。この期間中、別のプリフライト リクエストを発行する必要はありません。以上がWebApi のクロスドメイン セカンダリ リクエストと Vue の単一ページの問題を Nginx がどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undress AI Tool
脱衣画像を無料で

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

1. PHP開発の質問と回答コミュニティにおけるLaravel MySQL VUE/Reactの組み合わせの最初の選択は、生態系の成熟度と高開発効率のため、Laravel MySQL Vue/Reactの組み合わせの最初の選択肢です。 2。高性能では、キャッシュ(REDIS)、データベース最適化、CDN、非同期キューへの依存が必要です。 3.入力フィルタリング、CSRF保護、HTTPS、パスワード暗号化、許可制御を使用してセキュリティを行う必要があります。 4。オプションの広告、メンバーのサブスクリプション、報酬、委員会、知識の支払い、その他のモデル、コアはコミュニティトーンとユーザーのニーズに合わせることです。

MAC環境の構築におけるHomebrewの中心的な役割は、ソフトウェアのインストールと管理を簡素化することです。 1. Homebrewは、依存関係を自動的に処理し、複雑な編集プロセスとインストールプロセスを簡単なコマンドにカプセル化します。 2。ソフトウェアのインストールの場所と構成の標準化を確保するために、統一されたソフトウェアパッケージエコシステムを提供します。 3.サービス管理機能を統合し、BrewServicesを介してサービスを簡単に開始および停止できます。 4.便利なソフトウェアのアップグレードとメンテナンス、およびシステムのセキュリティと機能を改善します。

適切なPHPフレームワークを選択する場合、プロジェクトのニーズに応じて包括的に検討する必要があります。Laravelは迅速な発展に適しており、データベースの操作と動的フォームレンダリングに便利なEloquentormおよびBladeテンプレートエンジンを提供します。 Symfonyは、より柔軟で複雑なシステムに適しています。 Codeigniterは軽量で、高性能要件を持つ簡単なアプリケーションに適しています。 2。AIモデルの精度を確保するには、高品質のデータトレーニング、評価インジケーター(精度、リコール、F1値など)の合理的な選択、定期的なパフォーマンス評価とモデルチューニング、およびユニットテストと統合テストを通じてコードの品質を確保しながら、入力データを継続的に監視してデータドリフトを防ぐ必要があります。 3.ユーザーのプライバシーを保護するためには多くの手段が必要です:機密データを暗号化および保存する(AESなど

この記事では、VUE開発者と学習者向けの一連のトップレベルの完成品リソースWebサイトを選択しました。これらのプラットフォームを通じて、大規模な高品質のVUE完全プロジェクトを無料でオンラインで閲覧、学習、再利用することさえできます。

1。PHPは、主にデータ収集、API通信、ビジネスルール処理、キャッシュの最適化、および複雑なモデルトレーニングを直接実行するのではなく、AIコンテンツ推奨システムでの推奨表示を引き受けます。 2.システムは、PHPを介してユーザーの動作とコンテンツデータを収集し、バックエンドAIサービス(Pythonモデルなど)を呼び出して推奨結果を得て、Redisキャッシュを使用してパフォーマンスを改善します。 3.共同フィルタリングやコンテンツの類似性などの基本的な推奨アルゴリズムは、PHPに軽量ロジックを実装できますが、大規模なコンピューティングは依然としてプロのAIサービスに依存します。 4.最適化は、リアルタイム、コールドスタート、多様性、フィードバッククローズドループに注意を払う必要があり、課題には高い並行性パフォーマンス、モデルの更新安定性、データコンプライアンス、推奨解釈が含まれます。 PHPは、安定した情報、データベース、フロントエンドを構築するために協力する必要があります。

PHP環境と生産の間の矛盾の問題を解決するために、コアはKubernetesのコンテナ化とオーケストレーション機能を使用して環境の一貫性を実現することです。特定の手順は次のとおりです。1。すべてのPHPバージョン、拡張機能、依存関係、Webサーバー構成を含む統一されたDockerイメージを構築して、開発と生産で同じ画像が使用されるようにします。 2. KubernetesのconfigMapとSecretを使用して、非感受性および敏感な構成を管理し、ボリュームマウントまたは環境可変噴射を介したさまざまな環境構成の柔軟な切り替えを実現します。 3.統一されたKubernetes展開定義ファイル(展開やサービスなど)を介してアプリケーションの動作の一貫性を確保し、バージョンコントロールに含める。 4。

MongoDBをサポートするPHP環境を構成するために、コアステップはMongoDBのPHPドライバーをインストールして有効にして、PHPアプリケーションがMongoDBデータベースと通信できるようにすることです。 1. MongoDBPHPドライバーをインストールすると、PECLを使用してインストールすることをお勧めします。 PECLがない場合は、最初にPHP開発パッケージと関連するコンピレーションツールをインストールする必要があります。 2。PHP.iniファイルを編集し、拡張機能= mongodb.so(または.dll)を追加して拡張機能を有効にします。 3. WebサーバーまたはPHP-FPMサービスを再起動して、構成を有効にします。 4.拡張機能がphpinfo()またはphp-mを介して正常にロードされているかどうかを確認します。よくある質問には、PECLコマンドの欠落、コンピレーションエラー、Php.iniが含まれます

実用的かつ収益化可能なPHPCRMシステムを設計すると、まず、顧客管理、販売追跡、自動化プロセスなどのコア機能を含むMVPを作成し、その後の付加価値機能拡張をサポートするためのモジュラーアーキテクチャ(Laravelなど)を採用する必要があります。 2.ユーザーが継続的に支払う意思があるように、直感的なUX設計(Vue.jsフロントエンドなど)を使用して使用のしきい値を下げます。 3.データ分析レポート(販売ファンネル、パフォーマンス分析など)を使用して、顧客が意思決定の効率を向上させ、無料の基本機能と高度なレポートを改善して収益化を達成するのに役立ちます。 4.マルチテナントアーキテクチャを実装して、データの分離を確保し、SAASモデルの基礎を築き、商業化に影響を与える後の再構成を回避します。 5.収益化は、サブスクリプション料金に依存するだけでなく、APIのオープン性、カスタマイズされた開発、技術サポート、プラグイン市場の多様化市場を通じてもメリットがあります
