Penyelesaian kepada kegagalan permintaan Vue untuk log masuk ke rentas domain Laravel

Kata Pengantar: Dalam pembangunan sebenar, permintaan merentas domain adalah masalah yang sangat biasa, terutamanya dalam projek pemisahan bahagian hadapan dan belakang. Jika anda menggunakan Vue sebagai rangka kerja bahagian hadapan dan Laravel sebagai rangka kerja bahagian belakang, masalah merentas domain mungkin berlaku semasa log masuk. Artikel ini akan berkongsi cara menyelesaikan masalah permintaan Vue untuk log masuk ke kegagalan merentas domain Laravel.

1. Apakah itu silang domain?

Ringkasnya, domain silang merujuk kepada permintaan data antara dua nama domain yang berbeza. Sebagai contoh, dalam persekitaran pembangunan tempatan, alamat permintaan bahagian hadapan ialah http://localhost:8080, dan alamat bahagian belakang ialah http://localhost:8000 Jika kedua-dua alamat ini berbeza, masalah merentas domain mungkin berlaku.

2. Mengapakah kegagalan merentas domain berlaku?

Kegagalan merentas domain biasanya disebabkan oleh dasar merentas domain penyemak imbas. Secara lalai, penyemak imbas menyekat permintaan data antara nama domain yang berbeza untuk melindungi privasi dan keselamatan pengguna. Penyelesaiannya adalah untuk mengkonfigurasi bahagian belakang untuk membenarkan permintaan merentas domain.

3. Tetapan hujung belakang Laravel membenarkan permintaan merentas domain

Dalam Laravel, permintaan merentas domain boleh dilaksanakan melalui perisian tengah adalah seperti berikut:

1. Cari fail Cors.php aplikasi di bawah /Http/Middleware/, tambah kod berikut dalam kaedah pemegang:

header('Access-Control-Allow-Origin: *'); //Set to allow access daripada semua sumber
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization');//Tetapkan maklumat pengepala yang membenarkan akses
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');//Tetapkan kaedah membenarkan akses
return $response;

2. Gunakan perisian tengah Cors pada laluan, cari app/Http/Kernel.php fail, dan tambah kod berikut:

protected $middlewareGroups = [
'web' =>

];

  // ...

Pada ketika ini, bahagian belakang telah membenarkan permintaan merentas domain.

4. Sediakan permintaan merentas domain pada bahagian hadapan Vue

 'throttle:60,1',
 \Illuminate\Routing\Middleware\SubstituteBindings::class,
 \App\Http\Middleware\Cors::class //添加此处

Langkah seterusnya ialah menyediakan permintaan merentas domain dalam Vue. Kami boleh menggunakan pemalam Vue-axios untuk menghantar permintaan tak segerak dan memproses respons. Jalankan arahan berikut dalam projek Vue untuk memasang Vue-axios:

npm install --save axios vue-axios

Kemudian, tambahkan konfigurasi Vue-axios berikut dalam main.js:

import axios daripada 'axios'

import VueAxios daripada 'vue-axios'

Vue.use(VueAxios, axios)

axios.defaults.withCredentials = true

5 . Menghantar permintaan tak segerak dalam projek vue

Dengan tetapan di atas, kami telah membenarkan permintaan merentas domain. Dalam projek Vue, permintaan tak segerak boleh dihantar dengan cara berikut:

this.$axios.post('/login', {
'username': username, // Parameter lulus dalam borang

'kata laluan': kata laluan // Parameter diluluskan dalam bentuk

}).then(respons => {

}).catch(error => {

})

Ringkasan: Untuk menyediakan permintaan merentas domain, anda mesti menetapkan pengepala permintaan yang membenarkan permintaan merentas domain di bahagian belakang dan mengkonfigurasi Vue-axios pada bahagian hadapan. Hanya dengan mengguna pakai kedua-dua kaedah ini kita boleh memastikan bahawa projek dengan pemisahan bahagian hadapan dan belakang boleh berjalan dengan lancar.

   // 请求成功回调

Atas ialah kandungan terperinci Penyelesaian kepada kegagalan permintaan Vue untuk log masuk ke rentas domain Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!