2022.06.07 フロントエンド-uniApp クロスドメイン ソリューション

1.1. クロスドメインかどうかはどうやって判断するのですか?

这就是需要用跨域来请求数据的报错

        

ここに画像の説明を挿入

各 uniApp プロジェクトには、manifest.json 構成ファイルがあります。

次のコード文字列をmanifest.jsonに直接コピーします。

1.2. では、このクロスドメインをどのように使用すればよいのでしょうか?インターフェース上でどのように使用すればよいのでしょうか?

次に、各プロジェクトには、集中リクエスト インターフェイスの構成ファイルである、インターフェイスでカプセル化されたファイルが含まれます。あるいは、それがない場合は、関連するファイルのコードを自分で書くか見つける必要があります。そのため、学習するときに標準的なプロジェクトの例に出会うことが非常に重要です。そのため、この種のプロジェクトを尋ねるために私たちをそこに連れて行く人は誰もいません。標準プロジェクト?もちろんgithubマスターです。次に、インターフェイスによって要求されたパブリック アドレスをクロスドメイン名/プロキシ名に変更します。

 util.jsのサンプルカプセル化インターフェースは図のとおりで、記述後main.jsにインポートされます。

 以下は私のプロジェクトのインターフェイス パッケージ ファイルです。インターフェイスを使用するには、このファイルを main.js にインポートします。

api.js

page.vue を作成し、ページ上でカプセル化されたリクエスト メソッドを直接使用します。図に示すように、checkLogin はカプセル化された API インターフェイスの名前です。

 もう 1 つの方法は、インターフェイスをカプセル化せず、axios を使用してページにインターフェイスを書き込むように直接リクエストすることです。

このようにして、プロジェクトがインターフェースを要求すると、自動的にクロスドメインが実現されます。

 注: API の前のスラッシュは非常に重要です。このスラッシュを書かないと、ブラウザによってローカル アドレスとインターフェイスへの直接アクセスと判断され、インターフェイス 404 エラーが表示されます。インターフェイスが見つからないため、 loaclhost + ファイル ルート ディレクトリ + インターフェイスアドレスに直接アクセスします。http://localhost:8080/pages/index/api/t/wtdk/mobileVerifyApi

先頭のスラッシュを使用すると、http://localhost:8080/api/t/wtdk/mobileVerifyApi にアクセスします。

拡張エラー回避: インターフェイス アドレスを書き込み、クロスドメインを使用しない場合、一部のプロジェクトは 192.168.127.0 などの IP パブリック アドレスを直接使用します。インターフェイスをスプライシングするときに、多くの人が不注意で 192.168.127.0 と書き込みます。 8080/t /wtdk/mobileVerifyApi は、先頭に / がないため、ブラウザでは localhost:8080/***/192.168.127.0:8080/t/wtdk/mobileVerifyApi への直接アクセスと判断され、結果的にインターフェイスの 404 エラーで、実際には http:// を書き忘れています。http://192.168.127.0:8080/t/wtdk/mobileVerifyApi を記述する正しい方法です。http:// は http:// と同じです。 「/」。クロスドメインの場合は、クロスドメインパブリックアドレスが既に記述されているため、先頭に http:// を記述する必要はありません。ブラウザによる誤認識を避けるために、先頭に「/」を使用する必要があります。

おすすめ

転載: blog.csdn.net/m0_46551050/article/details/124019110