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

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

PHPz

リリース： 2023-04-17 11:40:40

オリジナル

1989 人が閲覧しました

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,
    //...
})

ログイン後にコピー