Cara pelayan penggunaan vue menyelesaikan masalah merentas domain

Vue.js ialah rangka kerja pembangunan bahagian hadapan yang sangat baik yang digunakan secara meluas dalam pembangunan aplikasi web. Ia membantu pembangun membina aplikasi moden dan cekap dengan cepat. Walau bagaimanapun, dalam pembangunan sebenar, kami mungkin menghadapi masalah merentas domain, terutamanya apabila kami menggunakan aplikasi Vue.js ke pelayan. Artikel ini memperincikan cara menyelesaikan isu merentas domain dalam aplikasi Vue.js.

Apakah itu merentas domain?

Ringkasnya, domain silang bermaksud meminta sumber daripada tapak web lain dalam halaman satu tapak web. Masalah merentas domain disebabkan terutamanya oleh dasar asal yang sama penyemak imbas. Dasar asal yang sama ialah dasar keselamatan pihak pelanggan yang menghalang aplikasi web daripada mendapatkan maklumat peribadi daripada dokumen atau skrip yang dimuatkan daripada satu sumber daripada sumber lain.

Mengapa kita perlu merentas domain?

Dalam pembangunan sebenar, kami selalunya perlu mengakses API atau sumber tapak web lain merentas domain. Sebagai contoh, kami mungkin perlu mendapatkan data daripada pelayan yang berbeza atau antara muka panggilan tapak web lain. Contohnya, dalam aplikasi Vue.js, kami mungkin perlu menghantar permintaan AJAX kepada pelayan untuk mendapatkan data. Jika pelayan tidak membenarkan permintaan merentas domain, data tidak boleh diperoleh dan aplikasi tidak akan berfungsi dengan betul.

Kaedah untuk menyelesaikan masalah merentas domain

1. Tambah maklumat pengepala CORS di bahagian pelayan

CORS (perkongsian sumber merentas domain) ialah mekanisme yang Membenarkan penyemak imbas menghantar permintaan merentas domain ke pelayan dan membenarkan pelayan mengembalikan respons merentas domain. CORS ialah standard yang dilaksanakan oleh penyemak imbas supaya ia boleh menyelesaikan isu merentas domain untuk aplikasi bahagian hadapan.

Kaedah untuk menambah maklumat pengepala CORS pada bahagian pelayan adalah sangat mudah, cuma tambahkan beberapa maklumat pengepala khusus pada respons HTTP yang dikembalikan. Butirannya adalah seperti berikut:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

Maksud maklumat pengepala di atas adalah seperti berikut:

• Access-Control-Allow-Origin: Tentukan nama domain yang dibenarkan. * bermaksud semua nama domain dibenarkan, atau satu atau lebih nama domain boleh ditentukan.
• Access-Control-Allow-Methods: Tentukan kaedah HTTP yang dibenarkan.
• Access-Control-Allow-Headers: Tentukan pengepala HTTP yang dibenarkan.

Kelemahan kaedah ini ialah maklumat pengepala perlu ditambah pada bahagian pelayan Jika aplikasi perlu mengakses berbilang pelayan atau API yang berbeza, ia perlu dikonfigurasikan pada setiap pelayan.

2. Menggunakan JSONP

JSONP ialah penyelesaian merentas domain yang memanfaatkan sokongan penyemak imbas untuk akses merentas domain kepada teg <script>. Prinsip JSONP adalah untuk menukar permintaan merentas domain menjadi teg <script> Atribut src teg ini menghala ke program pelayan yang menyelesaikan masalah merentas domain Program pelayan mengembalikan sekeping kod JavaScript ini menukar data yang dikembalikan kepada parameter Borang dihantar ke fungsi pada halaman hadapan.

Kaedah menggunakan JSONP dalam Vue.js adalah sangat mudah, cuma perkenalkan perpustakaan JSONP dan gunakan kaedah $jsonp() untuk menghantar permintaan JSONP. Butirannya adalah seperti berikut:

import jsonp from 'jsonp';

jsonp('https://api.example.com/data', (err, res) => {
   if (err) {
      console.error(err);
   } else {
      console.log(res);
   }
});

Kelemahan kaedah ini ialah JSONP hanya menyokong permintaan GET dan hanya boleh mengembalikan data dalam format JSON.

3. Menggunakan proksi terbalik

Proksi terbalik ialah kaedah sebelah pelayan untuk menyelesaikan permintaan merentas domain. Ia mengambil kesempatan daripada interkoneksi dan komunikasi antara pelayan, menggunakan program bahagian pelayan sebagai proksi, dan menukar permintaan di halaman hujung hadapan kepada permintaan program bahagian belakang, dengan itu mengelakkan sekatan dasar asal yang sama pada sebelah pelayar.

Terdapat banyak cara untuk melaksanakan proksi terbalik Anda boleh menggunakan modul proksi terbalik pelayan web seperti Apache dan Nginx, atau anda boleh menggunakan rangka kerja ekspres dalam Node.js untuk melaksanakan fungsi proksi terbalik.

Kaedah menggunakan proksi terbalik dalam Vue.js adalah seperti berikut:

Tambah kod berikut dalam fail config/index.js:

module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
          target: 'http://example.com',
          changeOrigin: true,
          pathRewrite: {
              '^/api': ''
          }
      }
    }
  }
};

Kod di atas menunjukkan bahawa semua berakhir dengan dimajukan ke /api, dan medan http://example.com ditambahkan pada pengepala permintaan untuk menghantar permintaan ke pelayan sasaran. Pendekatan ini memerlukan penyahpepijatan dan ujian semasa fasa pembangunan. Origin

Dalam persekitaran pengeluaran, kita perlu mengkonfigurasi proksi terbalik ke dalam pelayan. Hanya gunakan modul proksi terbalik pelayan web seperti Nginx atau Apache.

Ringkasan

Apabila aplikasi Vue.js digunakan ke pelayan, merentas domain ialah masalah biasa. Artikel ini menerangkan tiga cara untuk menyelesaikan isu merentas domain: menambahkan pengepala CORS pada bahagian pelayan, menggunakan JSONP dan menggunakan proksi terbalik. Dalam pembangunan sebenar, penyelesaian yang sesuai perlu dipilih berdasarkan keperluan dan senario yang berbeza.

Atas ialah kandungan terperinci Cara pelayan penggunaan vue menyelesaikan masalah merentas domain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!