Dengan populariti pemisahan bahagian hadapan dan belakang, semakin ramai pembangun menggunakan rangka kerja bahagian hadapan seperti Vue dan React, dan menggunakan aksios sebagai alat untuk bahagian hadapan menghantar permintaan ke bahagian belakang- tamat. Walau bagaimanapun, kadangkala kami menghadapi situasi: apabila menggunakan axios untuk menghantar permintaan POST, bahagian belakang tidak boleh menerima data dengan betul Ini berkaitan dengan kaedah konfigurasi axios yang kami gunakan pada bahagian hadapan.
Artikel ini akan memperkenalkan situasi yang mungkin: menggunakan axios untuk menghantar permintaan POST, bahagian belakang tidak boleh menerima data dengan betul. Pada masa yang sama, kami akan menyediakan penyelesaian, penyelesaian yang direka untuk membantu pembaca menghadapi situasi yang sama dengan lebih baik.
Penerangan Masalah
Apabila menggunakan Vue+axios untuk membangunkan projek, kami biasanya menggunakan axios.post()
untuk menghantar permintaan POST, yang membawa data yang perlu kami hantar. Contoh kod khusus adalah seperti berikut:
axios.post('/api/submit', { name: '张三', age: 25 }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Di bahagian belakang, $_POST
akan digunakan untuk menerima data yang dibawa dalam permintaan ini. Contohnya adalah seperti berikut:
$name = $_POST['name']; $age = $_POST['age'];
Walau bagaimanapun, apabila kami menghantar permintaan POST, bahagian belakang tidak dapat menerima data dengan betul.
Punca masalah
Sebab masalah ini ialah axios menggunakan format application/json
untuk menghantar data secara lalai apabila menghantar permintaan POST dan apabila bahagian belakang menggunakan $_POST
untuk menerima data, data perlu dalam format application/x-www-form-urlencoded
Format mesti diluluskan untuk diterima dengan betul. Jika format data berbeza, bahagian belakang tidak akan dapat menghuraikan data dengan betul.
Penyelesaian
Untuk menyelesaikan masalah ini, kita perlu mengubah suai pengepala permintaan lalai apabila axios menghantar permintaan untuk menukarnya kepada application/x-www-form-urlencoded
Kaedah khusus adalah seperti berikut:
axios.interceptors.request.use(config => { if (config.method === 'post') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; } return config; });
axios.post('/api/submit', qs.stringify({ name: '张三', age: 25 })) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Contoh kod yang diubah suai adalah seperti berikut:
axios.interceptors.request.use(config => { if (config.method === 'post') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; } return config; }); axios.post('/api/submit', qs.stringify({ name: '张三', age: 25 })) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
Selepas operasi di atas, kami boleh menghantar permintaan POST dengan betul ke bahagian belakang dan berjaya menerima data .
Ringkasan
Apabila menggunakan axios untuk menghantar permintaan POST, bahagian belakang tidak boleh menerima data dengan betul Ini biasanya kerana axios menggunakan format application/json
secara lalai untuk memindahkan data semasa menghantar permintaan, manakala axios menggunakan format $_POST
secara lalai untuk memindahkan data semasa menghantar permintaan. bahagian belakang menggunakan application/x-www-form-urlencoded
Semasa menerima data, data perlu dihantar dalam format application/x-www-form-urlencoded
untuk dihuraikan dengan betul. Untuk menyelesaikan masalah ini, kita perlu mengkonfigurasi pemintas permintaan axios, tetapkan Jenis Kandungan dalam pengepala permintaan kepada
Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika php $_post tidak boleh menerima axios?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!