Apakah yang perlu saya lakukan jika bahagian belakang vue nginx tidak boleh menerima parameter?

Apabila menggunakan Vue.js dan Nginx, kami sering menghadapi masalah bahawa bahagian belakang tidak dapat menerima parameter. Ini biasanya berlaku apabila menghantar data ke pelayan bahagian belakang menggunakan kaedah POST. Kadangkala, walaupun pengepala permintaan dan format data ditetapkan dengan betul dalam kod bahagian hadapan, pelayan bahagian belakang masih tidak dapat menerima parameter dengan betul.

Artikel ini akan memperkenalkan sebab mengapa masalah ini berlaku dalam Vue.js dan Nginx, dan menyediakan penyelesaian yang mungkin.

Punca masalah

Dalam Vue.js, kami menggunakan perpustakaan axios untuk menghantar permintaan HTTP. Sebagai contoh, kami boleh menghantar permintaan POST menggunakan axios seperti ini:

axios.post('/api/user', {
  name: 'john',
  age: 26
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

Dalam permintaan ini, kami menghantar objek JavaScript yang mengandungi nama pengguna dan umur sebagai parameter kepada kaedah axios.post. Kami juga menentukan format data sebagai aplikasi/x-www-form-urlencoded dalam pengepala permintaan. Ini bermakna kami mahu pelayan menghuraikan objek ini dengan betul dan menukarnya ke dalam format data yang sesuai.

Walau bagaimanapun, jika kami menggunakan Nginx sebagai pelayan, kami biasanya mendapati ia tidak menghuraikan data yang dihantar dengan betul. Ini kerana Nginx tidak menyokong format data aplikasi/x-www-form-urlencoded dalam permintaan POST secara lalai.

Penyelesaian

Untuk menyelesaikan masalah ini, kita perlu menambah arahan dalam fail konfigurasi Nginx. Khususnya, kami perlu menambah arahan yang serupa dengan yang berikut:

location /api {
  proxy_pass http://localhost:8000;
  proxy_set_header Content-Type application/x-www-form-urlencoded;
}

Dalam arahan ini, kami menggunakan arahan lokasi untuk menetapkan laluan permintaan ke /api. Kami juga menggunakan arahan proxy_pass untuk menghantar permintaan ke pelayan bahagian belakang. Perkara yang paling kritikal ialah kami menggunakan arahan proxy_set_header untuk menetapkan Content-Type dalam pengepala permintaan kepada application/x-www-form-urlencoded. Dengan cara ini, Nginx boleh menghuraikan data permintaan POST yang dihantar oleh Vue.js dengan betul.

Selain menetapkan Content-Type kepada application/x-www-form-urlencoded, kami juga boleh menetapkannya kepada application/json. Ia bergantung kepada format data yang kami hantar.

Ringkasan

Apabila membangun menggunakan Vue.js dan Nginx, adalah masalah biasa bahawa bahagian belakang tidak boleh menerima parameter. Ini kerana Nginx tidak menyokong format data aplikasi/x-www-form-urlencoded dalam permintaan POST secara lalai. Untuk menyelesaikan masalah ini, kita perlu menambah arahan pada fail konfigurasi Nginx untuk menetapkan Jenis Kandungan dalam pengepala permintaan kepada format data yang betul. Harap artikel ini dapat membantu anda menyelesaikan masalah yang sama.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika bahagian belakang vue nginx tidak boleh menerima parameter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!