uniapp を h5 として公開したときにインターフェイスを呼び出すことができない場合はどうすればよいですか?

最近、多くの開発者が uniapp を使用してアプリケーションを構築するときに問題に遭遇しました。アプリケーションを H5 として公開した後、API インターフェイスを呼び出すことができません。この問題は解決するのが難しいように思えるかもしれませんが、実際には、少し調整するだけで解決できます。

まず、uniapp とは何かを理解しましょう。 uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークで、H5、iOS、Android、その他のプラットフォームを含むマルチエンド パブリッシングをサポートします。 uniapp の登場により、開発者は Vue.js を使用してネイティブ アプリケーションを開発できるようになり、コードを 1 回記述するだけで複数のプラットフォームに同時に公開できるようになります。

ただし、uniapp アプリケーションを H5 として公開すると、API インターフェイスを呼び出すことができない場合があります。これはクロスドメインの問題が原因です。ブラウザーでページにアクセスするときに、ページが別のドメインから API インターフェイスを呼び出す必要がある場合、ブラウザーはクロスサイト スクリプティング攻撃を防ぐためにこの操作をブロックします。

それでは、この問題をどうやって解決すればいいのでしょうか?

一般的な解決策は、サーバー側で CORS (Cross-Origin Resource Sharing) をセットアップすることです。 CORS は、同じドメイン名のアプリケーションが別のドメイン名のリソースにアクセスできるようにするメカニズムです。 CORS を使用するには、クライアントによるクロスドメイン アクセスを許可するためにサーバー側で応答ヘッダー情報を設定する必要があります。ただし、多くの開発者にとって、サーバー構成を変更したり、CORS をサポートするサービス プロバイダーを見つけたりする必要があるため、これを実装するのはそれほど簡単ではありません。

もう 1 つの解決策は、JSONP を使用することです。 H5 アプリケーションの人気に伴い、JSONP の人気も高まっています。 JSONP は、別のドメインからのスクリプトをページにロードし、ロード時にパラメータをサーバーに渡すことを可能にするクロスドメイン リクエスト メソッドです。 JSONP の仕組みは、クライアントがページ上の JavaScript ファイルを参照し、コールバック関数をトリガーしてそれをパラメーターとしてサーバーに渡すことです。サーバーはリクエストを受信すると、データをコールバック関数にカプセル化して返します。クライアントはコールバック関数を通じてデータを取得できます。

uniapp で JSONP を使用するのは非常に簡単です。 uni.request メソッドを使用して、クロスドメイン リクエストを行うことができます。

uni.request({
  url: 'http://example.com/api/data',
  method: 'GET',
  dataType: 'jsonp',
  success: function (res) {
    console.log(res.data)
  }
})

上の例では、dataType を jsonp に設定して、リクエストを処理するために JSONP を使用する必要があることをサーバーに伝えます。サーバーはリクエストを受信すると、JSONP 形式でレスポンスを返します。クライアント側では、コールバック関数を使用して JSONP 応答を処理できます。

function handleResponse(data) {
  console.log(data)
}

<script src="http://example.com/api/data?callback=handleResponse"></script>

この例では、ページにスクリプト タグを追加し、src 属性をリクエスト URL に設定し、URL を追加します。コールバックパラメータ。ブラウザがこの URL をロードすると、サーバーはデータをコールバック関数にカプセル化し、JavaScript コードの形式で返します。ページ上のコールバック関数が呼び出され、応答データが取得されます。

つまり、uniapp を使用して構築されたアプリケーションが H5 として公開された後に API インターフェイスを呼び出すことができない場合は、クロスドメインの問題を解決するために JSONP の使用を検討できます。 CORS の実装が簡単な場合は、サーバー側で CORS をセットアップしてみることもできます。どの方法を使用しても、アプリケーションは H5 プラットフォーム上で正常に実行できます。

以上がuniapp を h5 として公開したときにインターフェイスを呼び出すことができない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。