uniappモバイルブラウザプレビューがインターフェースにアクセスできない問題を解決する方法

uniapp を使用してアプリケーションを開発する場合、uniapp 自体の特性により、モバイル ブラウザーのプレビューがインターフェイスにアクセスできないことがよくあります。この記事ではその理由や解決策などを解説していきます。

問題現象

uniapp を使用してアプリケーションを開発する場合、通常、HBuilderX エディターを通じてプロジェクトをリアルタイムでプレビューするため、インターフェイスの効果を簡単に確認してコードをデバッグできます。ただし、アプリケーションをサーバーにデプロイした後、モバイル ブラウザでアプリケーションにアクセスすると、ページは正常に表示されますが、インターフェイスにアクセスすると 404 またはその他のエラー メッセージが返されます。

問題の原因

Uni-app の開発プロセス中、uni.request() メソッドを使用してインターフェイス リクエストを行うことができます。このメソッドは自動的にデフォルトで https を追加します。://unidemo.dcloud.net.cn は要求されたドメイン名として使用され、ローカルでプレビューする場合は localhost または 127.0 を使用します。 0.1。このとき、モバイル ブラウザでインターフェイスにアクセスすると、インターフェイスが要求するドメイン名が実際のアプリケーションのドメイン名と異なるため、インターフェイスの要求が失敗します。

解決策

オプション 1: クロスドメインの構成

サーバー上でクロスドメイン リクエストを構成し、localhost または を含むアクセスを許可します。 127.0. 0.1 などのドメイン名のインターフェイス。 Nginx サーバーでは、次の構成を通じてこれを実現できます。

location / {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, HEAD';
    add_header Access-Control-Allow-Headers 'Authorization, X-Requested-With, Content-Type, Accept';
    proxy_pass http://your_domain:your_port;
}

オプション 2: リクエスト ドメイン名を変更する

uniapp の request メソッドでは、次のことができます。 baseURL オプションを追加します。これは、要求されたドメイン名の設定に使用されます。実行環境を判断して baseURL を動的に設定することで、プレビュー中にインターフェースにアクセスできない問題を解決できます。

let baseURL = '';
if(process.env.NODE_ENV === 'development'){
    baseURL = 'http://localhost:3000';
}else{
    baseURL = 'http://your_domain:your_port';
}
uni.request({
    url: '/api',
    method: 'POST',
    baseURL: baseURL,
    //...
})

概要

開発に uniapp を使用する場合、プレビュー中に要求されたドメイン名と実際にデプロイされたドメイン名との違いにより、インターフェイス要求が失敗する可能性があります。この問題は、クロスドメインを構成するか、要求されたドメイン名を動的に設定することで解決できます。

以上がuniappモバイルブラウザプレビューがインターフェースにアクセスできない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。