vue menetapkan perujuk pengepala permintaan

Vue ialah rangka kerja JavaScript popular yang membolehkan pembangun membina antara muka pengguna interaktif dan aplikasi satu halaman. Dalam Vue, menetapkan perujuk pengepala permintaan HTTP adalah sangat penting, terutamanya apabila keselamatan diperlukan. Artikel ini akan memperkenalkan cara menggunakan Vue untuk menetapkan perujuk pengepala permintaan untuk memastikan keselamatan aplikasi.

Pengepala permintaan HTTP mengandungi beberapa metadata, yang membolehkan pelayan memahami jenis sumber yang diminta oleh klien, kaedah permintaan dan sumber permintaan. Perujuk ialah salah satu metadata, yang merekodkan alamat sumber permintaan HTTP, iaitu, ia memberitahu pelayan tapak web atau pautan halaman yang menghala ke permintaan semasa.

Dalam banyak kes, adalah sangat penting bagi pelayan untuk mengetahui alamat sumber permintaan. Sebagai contoh, apabila pengguna log masuk ke laman web, pelayan perlu mengetahui halaman mana permintaan itu datang untuk memastikan nama pengguna dan kata laluan yang dimasukkan oleh pengguna adalah daripada laman web yang betul.

Berikut ialah langkah tentang cara menetapkan pengepala permintaan perujuk dalam aplikasi Vue:

1. Pasang Axios

Axios ialah HTTP berasaskan Promise perpustakaan. Digunakan untuk menghantar permintaan HTTP dan memproses respons HTTP. Ia adalah salah satu perpustakaan HTTP yang paling popular untuk Vue, dan ia menyokong menetapkan pengepala permintaan HTTP.

Untuk menggunakan Axios, kami perlu memasangnya dalam aplikasi Vue kami. Kita boleh menggunakan npm untuk memasang Axios seperti berikut:

npm install axios --save

2. Import Axios dalam komponen Vue

Untuk menggunakan Axios dalam komponen Vue, anda boleh menggunakan arahan import untuk importnya Import ke dalam komponen. Contohnya:

import axios from 'axios'

Ini akan menarik masuk Axios dan menyimpannya dalam pembolehubah supaya kita boleh menggunakannya dalam komponen kita.

3. Tetapkan pengepala permintaan perujuk dalam Axios

Untuk menetapkan pengepala permintaan perujuk, kita boleh menggunakan atribut pemintas Axios untuk memintas permintaan HTTP. pemintas ialah objek pemintas yang mempunyai dua kaedah, satu untuk memintas permintaan dan satu lagi untuk memintas tindak balas. Kita perlu menetapkan pengepala permintaan perujuk dalam pemintas permintaan.

Berikut ialah kod tentang cara menetapkan pengepala permintaan perujuk:

axios.interceptors.request.use(config => {
  config.headers.referer = 'http://example.com'
  return config
})

Dalam kod di atas, kami menggunakan kaedah request.use untuk memintas semua permintaan HTTP dan memprosesnya dengan menghantar fungsi panggil balik bertanya. Dalam fungsi panggil balik, kami menetapkan nilai sifat config.headers.referer kepada 'http://example.com'. Ini akan menetapkan pengepala permintaan perujuk kepada 'http://example.com'.

Perhatikan bahawa kod di atas hanyalah satu contoh. Dalam aplikasi praktikal, kita harus menggunakan alamat tapak web sebenar untuk menetapkan pengepala permintaan perujuk.

4. Hantar permintaan HTTP dan semak pengepala permintaan perujuk

Sekarang kami telah menetapkan pengepala permintaan perujuk dalam Axios, kami boleh menghantar permintaan HTTP dalam aplikasi Vue dan Semak sama ada perujuk pengepala permintaan ditetapkan.

Berikut ialah contoh kod:

axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

Dalam kod di atas, kami menggunakan Axios untuk menghantar permintaan GET ke alamat http://example.com/api/data dan log masuk data tindak balas konsol. Jika Axios berjaya menghantar permintaan HTTP dan mendapat respons, kami boleh menyemak pengepala permintaan perujuk dalam pengepala respons. Jika pengepala permintaan perujuk ditetapkan dengan betul, kita boleh melihat maklumat pengepala respons dalam konsol.

Ringkasan

Menetapkan pengepala permintaan perujuk dalam aplikasi Vue adalah sangat penting kerana ia boleh melindungi aplikasi kami daripada beberapa serangan biasa, seperti serangan CSRF. Axios ialah perpustakaan HTTP popular yang membolehkan kami menetapkan pengepala permintaan perujuk untuk memintas permintaan HTTP dengan menggunakan pemintas Axios. Untuk menetapkan pengepala permintaan perujuk, kita perlu menambah pengepala permintaan pada sifat config.headers.referer dan menggunakan alamat tapak web sebenar dan bukannya 'http://example.com' dalam contoh. Akhir sekali, kami perlu menghantar permintaan HTTP dan menyemak sama ada pengepala permintaan perujuk ditetapkan dengan betul.

Atas ialah kandungan terperinci vue menetapkan perujuk pengepala permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!