Apakah yang perlu saya lakukan jika antara muka tidak boleh dipanggil apabila uniapp diterbitkan sebagai h5?

Baru-baru ini, ramai pembangun menghadapi masalah semasa membina aplikasi menggunakan uniapp: selepas menerbitkan aplikasi sebagai H5, antara muka API tidak boleh dipanggil. Masalah ini mungkin kelihatan sukar untuk diselesaikan, tetapi sebenarnya, ia hanya memerlukan beberapa tweak untuk memperbaikinya.

Pertama sekali, mari kita fahami apa itu uniapp. uniapp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, menyokong penerbitan berbilang hujung, termasuk H5, iOS, Android dan platform lain. Kemunculan uniapp membolehkan pembangun menggunakan Vue.js untuk membangunkan aplikasi asli, dan hanya perlu menulis kod sekali untuk menerbitkan ke berbilang platform pada masa yang sama.

Walau bagaimanapun, apabila kami menerbitkan aplikasi uniapp sebagai H5, kami mungkin mendapati bahawa antara muka API tidak boleh dipanggil. Ini disebabkan oleh isu merentas domain. Apabila kami mengakses halaman dalam penyemak imbas, jika halaman itu perlu memanggil antara muka API daripada domain yang berbeza, penyemak imbas akan menyekat operasi ini untuk mengelakkan serangan skrip merentas tapak.

Jadi, bagaimana untuk menyelesaikan masalah ini?

Penyelesaian biasa ialah menyediakan CORS (Perkongsian Sumber Silang Asal) di sebelah pelayan. CORS ialah mekanisme yang membenarkan aplikasi di bawah nama domain yang sama untuk mengakses sumber di bawah nama domain lain. Menggunakan CORS memerlukan menetapkan maklumat pengepala respons pada bahagian pelayan untuk membenarkan akses merentas domain oleh klien. Walau bagaimanapun, bagi kebanyakan pembangun, ini tidak begitu mudah untuk dilaksanakan kerana ia mungkin memerlukan perubahan konfigurasi pelayan atau mencari pembekal perkhidmatan yang menyokong CORS.

Penyelesaian lain ialah menggunakan JSONP. Dengan populariti aplikasi H5, JSONP telah menjadi semakin popular. JSONP ialah kaedah permintaan merentas domain yang membenarkan skrip daripada domain lain dimuatkan pada halaman dan parameter dihantar ke pelayan semasa memuatkan. Cara JSONP berfungsi ialah klien merujuk fail JavaScript pada halaman, yang mencetuskan fungsi panggil balik dan menghantarnya ke pelayan sebagai parameter. Selepas pelayan menerima permintaan, ia akan merangkum data dalam fungsi panggil balik dan mengembalikannya, dan pelanggan boleh mendapatkan data melalui fungsi panggil balik.

Menggunakan JSONP dalam uniapp adalah sangat mudah. Permintaan merentas domain boleh dibuat menggunakan kaedah uni.request:

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

Dalam contoh di atas, kami menetapkan dataType kepada jsonp untuk memberitahu pelayan bahawa kami perlu menggunakan JSONP untuk mengendalikan permintaan. Selepas pelayan menerima permintaan, ia akan mengembalikan respons dalam format JSONP. Di sisi klien, kami boleh menggunakan fungsi panggil balik untuk mengendalikan respons JSONP:

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

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

Dalam contoh ini, kami menambahkan teg skrip pada halaman dan menetapkan atribut src kepada URL permintaan, dan dalam parameter panggil balik URL Ditambah. Apabila penyemak imbas memuatkan URL ini, pelayan akan merangkum data ke dalam fungsi panggil balik dan mengembalikannya dalam bentuk kod JavaScript. Fungsi panggil balik pada halaman akan dipanggil dan data respons akan diperolehi.

Ringkasnya, jika aplikasi yang dibina menggunakan uniapp tidak boleh memanggil antara muka API selepas diterbitkan sebagai H5, anda boleh mempertimbangkan untuk menggunakan JSONP untuk menyelesaikan masalah merentas domain. Jika CORS lebih mudah dilaksanakan untuk anda, anda juga boleh cuba menyediakan CORS pada bahagian pelayan. Tidak kira kaedah yang digunakan, aplikasi anda boleh berjalan seperti biasa pada platform H5.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika antara muka tidak boleh dipanggil apabila uniapp diterbitkan sebagai h5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!