prinsip permintaan proksi vue-cli

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk mencipta aplikasi web interaktif. Semasa proses pembangunan, kami biasanya menggunakan vue-cli untuk memulakan projek asas Vue. vue-cli ialah alat perancah yang disediakan secara rasmi oleh Vue Ia menyediakan banyak fungsi yang mudah, seperti permulaan projek, pembungkusan, penerbitan, dll.

Walau bagaimanapun, kami mungkin menghadapi masalah semasa proses pembangunan: permintaan merentas domain. Disebabkan dasar asal yang sama penyemak imbas, apabila kami menghantar permintaan pada Ajax bahagian hadapan, kami hanya boleh meminta sumber pelayan di bawah nama domain yang sama, tetapi bukan sumber pelayan dalam nama domain lain. Pada masa ini, kami boleh menyelesaikan masalah ini melalui permintaan proksi dalam vue-cli.

Jadi, bagaimanakah permintaan proksi dalam vue-cli dilaksanakan?

Perbezaan antara permintaan langsung dan permintaan proksi

Sebelum memahami prinsip permintaan proksi, kita perlu memahami perbezaan antara permintaan langsung dan permintaan proksi. Apabila kami mengakses perkhidmatan bahagian belakang secara terus melalui permintaan Ajax semasa proses pembangunan, permintaan akan dihantar terus dari hujung hadapan ke hujung belakang, seperti yang ditunjukkan dalam rajah berikut:

Kaedah ini akan melibatkan isu merentas domain. Jika antara muka belakang tidak menetapkan pengepala respons merentas domain, penyemak imbas akan melarang bahagian hadapan daripada memulakan permintaan AJAX, menyebabkan permintaan gagal.

Dalam vue-cli, kami akan menyelesaikan masalah ini melalui permintaan proksi. Idea asas permintaan proksi adalah untuk menghantar permintaan ke pelayan tempatan, yang kemudiannya memajukan permintaan ke pelayan bahagian belakang.

Konfigurasi proksi dalam vue.config.js

Dalam projek vue-cli, kami boleh menetapkan proksi dengan mengkonfigurasi fail vue.config.js bertanya. Dalam fail ini, kita boleh menetapkan pilihan devServer dan mengkonfigurasi proksi dengan menetapkan objek proxy. Berikut ialah contoh mudah:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

Dalam konfigurasi proksi di atas, kami memajukan semua permintaan di bawah laluan /api ke alamat http://localhost:8080 setempat.

Antaranya, pilihan changeOrigin digunakan untuk mengawal sama ada nama hos asal dalam pengepala permintaan perlu ditukar. Dalam

objek proksi, kita boleh menetapkan berbilang alamat proksi, contohnya:

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

Di sini /api1 dan /api2 masing-masing mewakili laluan permintaan untuk dimajukan, dan atribut target menentukan Alamat pelayan untuk dimajukan.

Prinsip Pelaksanaan

Setelah memahami konfigurasi permintaan proksi, mari kita lihat prinsip pelaksanaan permintaan proksi.

Pertama sekali, apabila kami memulakan permintaan di bahagian hadapan, permintaan itu akan dihantar ke pelayan tempatan terlebih dahulu. Selepas pelayan tempatan menerima permintaan, ia akan melakukan satu siri pemprosesan pada permintaan, termasuk mengubah suai pengepala permintaan, mengubah suai laluan permintaan, dsb. Permintaan yang diproses kemudiannya dimajukan ke pelayan bahagian belakang.

Carta alir adalah seperti berikut:

Perlu diingatkan bahawa dalam pelayan tempatan, kita perlu menyediakan perisian tengah proksi, seperti http-proxy-middleware. Perisian tengah proksi ialah pemintas yang serupa dengan permintaan tindak balas, digunakan untuk mengawal proses permintaan dan mengubah suai kandungan permintaan. Kami boleh melaksanakan pemajuan proksi permintaan dengan mengkonfigurasi perisian tengah proksi.

Ringkasan

Melalui pengenalan di atas, kami memahami prinsip permintaan proksi dalam vue-cli. Permintaan proksi ialah kaedah untuk menyelesaikan masalah merentas domain di bahagian hadapan Ia memajukan permintaan ke pelayan tempatan, dan kemudian pelayan tempatan memajukan permintaan ke pelayan bahagian belakang untuk mencapai kesan permintaan merentas domain. Dalam vue-cli, kami boleh menyediakan permintaan proksi dengan mengkonfigurasi fail vue.config.js untuk melaksanakan permintaan merentas domain di bahagian hadapan.

Atas ialah kandungan terperinci prinsip permintaan proksi vue-cli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!