Bagaimana untuk membuat permintaan merentas domain dalam Vue?

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden. Apabila membangunkan aplikasi menggunakan Vue, anda sering perlu berinteraksi dengan API yang berbeza, yang selalunya terletak pada pelayan yang berbeza. Disebabkan oleh sekatan dasar keselamatan merentas domain, apabila aplikasi Vue berjalan pada satu nama domain, ia tidak boleh berkomunikasi secara langsung dengan API pada nama domain lain. Artikel ini akan memperkenalkan beberapa kaedah untuk membuat permintaan merentas domain dalam Vue.

1 Gunakan proksi

Penyelesaian merentas domain yang biasa ialah menggunakan proksi. Dalam kes ini, aplikasi Vue memintas dasar asal yang sama penyemak imbas dengan membuat permintaan HTTP ke pelayan yang sama. Pelayan menerima permintaan dan memajukannya ke API sebenar. Memandangkan pelayan proksi berada pada domain yang sama dengan API, penyemak imbas tidak akan mengeluarkan sekatan keselamatan merentas domain mengenai perkara ini. Berikut ialah contoh cara menyediakan proksi:

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Dalam contoh di atas, kami sedang meproksi semua permintaan bermula dengan /api hingga https://example.com. changeOrigin ditetapkan kepada true untuk menetapkan sumber kepada alamat target dan tetapkan pathRewrite untuk mengalih keluar /api daripada permintaan.

2. JSONP (GET permintaan sahaja)

JSONP ialah penyelesaian merentas domain lama yang menggunakan permintaan GET untuk menambahkan teg <script> secara dinamik pada domain yang berbeza. Dengan menghantar nama fungsi panggil balik sebagai parameter, pelayan boleh membungkus data JSON dalam fungsi panggil balik dan mengembalikannya kepada klien. Oleh kerana sumber skrip tidak dipengaruhi oleh Dasar Asal yang Sama, penyemak imbas tidak menyekat skrip yang dikembalikan daripada domain yang berbeza. Kaedah ini hanya berfungsi untuk permintaan GET kerana ia tidak mempunyai badan permintaan.

Berikut ialah contoh JSONP:

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

Dalam contoh di atas, kami menggunakan Promise untuk merangkum permintaan JSONP, buat teg <script> dan tambahkannya pada document.head. Apabila pelayan mengembalikan data, tetapkan nama fungsi panggil balik kepada window.getdata, alih keluar teg <script> dalam fungsi panggil balik dan hantar data kepada resolve panggil balik.

3. CORS

Perkongsian sumber silang (CORS) ialah penyelesaian merentas domain moden yang membolehkan pelayan menentukan sumber (nama domain) yang mempunyai kebenaran untuk mengakses API. Pelayan melakukan ini dengan mengembalikan pengepala respons tertentu. Apabila penyemak imbas membuat permintaan silang asal, ia meminta pengepala respons Kawalan Akses Pelayan dalam permintaan prapenerbangan untuk mengesahkan sama ada permintaan itu dibenarkan. Jika API mengembalikan pengepala respons ini, penyemak imbas akan membenarkan permintaan silang asal.

Berikut ialah contoh CORS:

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

Dalam contoh di atas, kami menggunakan fungsi fetch untuk mendapatkan data API, sambil menetapkan mode kepada cors untuk membolehkan CORS . Kami juga menetapkan pengepala Access-Control-Allow-Origin dalam pengepala permintaan, yang membenarkan semua asal untuk mengakses API. Ambil perhatian bahawa untuk CORS berfungsi dengan betul, pelayan mesti mengembalikan pengepala ini dalam respons.

Kesimpulan

Vue boleh menggunakan pelbagai kaedah seperti proksi, JSONP dan CORS untuk membuat permintaan merentas domain. Setiap kaedah mempunyai kelebihan, kelemahan dan senario yang boleh digunakan. Apabila memilih untuk menggunakan penyelesaian khusus, pertimbangkan keselamatan API anda, kerumitan permintaan anda dan kelajuan respons anda.

Atas ialah kandungan terperinci Bagaimana untuk membuat permintaan merentas domain dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!