Vue menggunakan dalam talian untuk menyelesaikan masalah merentas domain

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi satu halaman (SPA). Semasa membangunkan aplikasi Vue, anda mungkin menghadapi isu merentas domain. Isu merentas domain sering menghalang penyemak imbas daripada memuatkan sumber daripada asal yang berbeza. Malah, apabila menggunakan aplikasi Vue, isu merentas domain boleh menjadi halangan dalam banyak aspek. Artikel ini akan memperkenalkan penggunaan Vue.js sambil memfokuskan pada cara menyelesaikan masalah merentas domain.

Apakah itu merentas domain?

Dalam penyemak imbas, apabila skrip dilaksanakan dalam pepohon dokumen halaman Web, skrip yang dilaksanakan boleh mengakses mana-mana bahagian pepohon dokumen. Walau bagaimanapun, isu merentas domain timbul apabila cuba mengakses sumber daripada sumber yang berbeza.

Sumber

Sumber merujuk kepada pelayan atau klien dalam rangkaian, yang boleh menjadi alamat IP, nama domain atau nombor port. Penyemak imbas menentukan sama ada dua URL adalah sama dengan membandingkan komponen sumber untuk menentukan sama ada ia adalah merentas domain.

Sebagai contoh, katakan kita mempunyai URL berikut:

http://www.example.com/page1
https://www.example.com/page2
http://www.example.com:8080/page3

Setiap satu daripadanya mengandungi tiga komponen: protokol, hos dan nombor port. Dalam contoh ini, URL pertama dan ketiga mempunyai protokol dan hos yang sama, tetapi nombor portnya berbeza. Disebabkan oleh nombor port yang berbeza, URL ini dianggap sebagai sumber yang berbeza.

Cross-origin

Apabila skrip JavaScript cuba mengakses sumber daripada sumber lain, penyemak imbas akan menyekat pelaksanaan skrip mengikut dasar asal yang sama. Pelayar berpendapat ini akan menghalang skrip berniat jahat daripada mencuri data.

Sebagai contoh, jika kod JavaScript komponen dalam aplikasi Vue.js cuba mengakses API daripada sumber lain, aplikasi akan membuat permintaan silang asal kepada penyemak imbas. Jika isu merentas domain tidak diselesaikan, penyemak imbas akan menghalang aplikasi daripada memuatkan sumber yang diperlukan daripada sumber lain.

Menyelesaikan isu merentas domain

Untuk menyelesaikan isu merentas domain dalam aplikasi Vue.js, anda perlu mempertimbangkan pelbagai aspek: rentas domain API belakang, sumber statik berpakej bahagian hadapan merentas domain, dsb., kami akan berurusan dengan mereka secara berasingan.

Rentas domain API Belakang

Dalam aplikasi Vue.js, API perlu berinteraksi dengan aplikasi bahagian hadapan. Jika API ini berada dalam domain yang berbeza, domain silang perlu dilakukan. Anda boleh menyelesaikan masalah ini melalui kaedah berikut:

1 Lulus pengepala HTTP Access-Control-Allow-Origin

Tetapkan pengepala Access-Control-Allow-Origin pada bahagian pelayan API. kepada Penyemak imbas boleh menyelesaikan masalah merentas domain dengan menyatakan alamat pelayan proksi terbalik yang dipercayai.

Pengepala HTTP Access-Control-Allow-Origin mengenal pasti nama domain yang dipercayai oleh pelayan. Jika pengepala ini mengandungi alamat yang diminta daripada klien, pelayan API akan membenarkan permintaan itu diluluskan.

Access-Control-Allow-Origin: http://your-domain.com/

Untuk membenarkan semua domain mengakses API, anda boleh menggunakan kad bebas:

Access-Control-Allow-Origin: *

Penyelesaian ini mudah, tetapi sangat terhad dan tidak sesuai untuk kebanyakan aplikasi.

2. Tambahkan pelayan proksi terbalik

Untuk mengawal permintaan yang boleh melalui proksi terbalik dengan lebih baik, anda boleh menggunakan pelayan proksi terbalik, seperti Nginx. Pelayan proksi terbalik digunakan untuk mendapatkan data daripada pelayan jauh (seperti pelayan API) dan mengembalikannya kepada klien.

Apabila menggunakan proksi terbalik, pelayan API tidak akan terdedah kepada Internet. Sebaliknya, pelanggan akan menghantar permintaan kepada proksi terbalik dan mendapatkan data daripadanya. Pelayan proksi terbalik mengawal permintaan mana yang melalui saluran paip permintaan.

Sebagai contoh, untuk API tertentu aplikasi Vue.js, anda boleh menetapkan konfigurasi pelayan Nginx berikut:

location /api/ {
   proxy_pass http://your-api-server.com/;
   add_header 'Access-Control-Allow-Origin' 'http://your-domain.com/';
}

Tetapan di atas menentukan bahawa semua permintaan untuk laluan /api/* akan dimajukan kepada pelayan API atasan. Apabila permintaan dihantar daripada pengguna dengan nama domain your-domain.com, pelayan proksi terbalik akan membenarkan permintaan itu melaluinya. Hanya permintaan daripada domain ini akan dibenarkan. Nama domain lain akan ditolak.

Selepas aplikasi bahagian hadapan digunakan, sumber statik dibungkus merentasi domain

Aplikasi Vue.js akan dibungkus sebagai fail statik dalam persekitaran pengeluaran dan digunakan pada pelayan tempat aplikasi itu berada terletak. Jika aplikasi bahagian hadapan dan API anda digunakan pada pelayan yang berbeza, apabila menghadapi situasi ini, kami perlu melakukan perkara berikut:

1 Tambah pembungkusan publicPath

dalam fail konfigurasi Vue -end kod statik, jika publicPath tidak ditetapkan, akan merujuk sumber berkaitan melalui laluan relatif. Kaedah import laluan relatif akan menggunakan './', '../', dsb. untuk mewakili pengecam laluan sumber yang diimport dan laluan yang diwakili oleh pengecam ini hanya relatif kepada fail kod.

Dalam sumber statik yang dibungkus, anda akan mendapati bahawa laluan sumber diakses sebagai laluan relatif. Jika anda menyalin kod yang dibungkus terus ke pelayan lain untuk akses, anda akan mendapati bahawa masalah akses akan berlaku.

Untuk menyelesaikan masalah ini, anda perlu menambah publicPath apabila membungkus fail statik dan menukar semua laluan kepada laluan mutlak.

Sebelum digunakan, buka fail vue.config.js dan tambah alamat publicPath. Contohnya:

module.exports = {
    publicPath: 'http://cdn.example.com/vue-app'
}

Konfigurasi ini memberitahu Webpack untuk mengkonfigurasi publicPath sebagai alamat tersuai apabila menjana sumber statik, supaya apabila mengakses nama domain lain, kod boleh dimuatkan terus melalui sumber CDN, menyelesaikan masalah silang- permintaan sumber domain.

2. Tetapkan peraturan CORS

Apabila kedua-dua sumber statik dan sumber API berada di bawah nama domain CDN, anda perlu menetapkan peraturan CORS dan bukannya menggunakan proksi terbalik Nginx, kerana Nginx biasanya akan Terdapat lapisan pecutan CDN.

Tetapkan peraturan CORS merentas domain pada konsol CDN, hidupkan pengepala Access-Control-Allow-Origin, benarkan kod bahagian hadapan mengakses sumber statik dan selesaikan masalah akses sumber merentas domain.

Kesimpulan

Apabila membangunkan aplikasi Vue.js, menyelesaikan isu merentas domain ialah langkah penting. Artikel ini memperincikan cara menyelesaikan masalah merentas domain dalam Vue.js. Kami memerlukan penyelesaian merentas domain yang berbeza untuk senario yang berbeza Dengan memahami dan menguasai isu merentas domain, kami boleh meningkatkan prestasi dan kebolehpercayaan aplikasi Vue.js dengan berkesan.

Atas ialah kandungan terperinci Vue menggunakan dalam talian untuk menyelesaikan masalah merentas domain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!