Antara muka pelayan tidak boleh diakses selepas penggunaan vue

Dalam pembangunan projek Vue, kadangkala kami menghadapi masalah yang sangat biasa, iaitu, selepas penggunaan projek selesai, kami tidak boleh mengakses antara muka pelayan bahagian belakang. Keadaan ini boleh menjadi sakit kepala yang besar kerana ia akan menyebabkan halaman bahagian hadapan tidak dapat memaparkan data bahagian belakang, yang juga akan menghalang projek daripada berjalan seperti biasa.

Jadi, kenapa masalah ini berlaku? Bagaimana untuk menyelesaikan masalah ini? Dalam artikel ini, kami akan menganalisis dan menerangkannya dari pelbagai aspek untuk membantu anda menyelesaikan masalah ini.

1. Isu merentas domain penyemak imbas

Disebabkan dasar asal penyemak imbas yang sama, secara amnya mustahil untuk meminta antara muka secara langsung daripada sumber yang berbeza. Sebagai contoh, jika projek Vue kami berjalan pada localhost:8080 dan permintaan perkhidmatan bahagian belakang adalah pada localhost:3000, maka halaman hujung hadapan tidak boleh menghantar permintaan ke bahagian belakang.

Terdapat banyak cara untuk menyelesaikan masalah ini, salah satu penyelesaiannya ialah menggunakan proksi. Dalam Vue, kita boleh mengkonfigurasi proksi dengan menetapkan pilihan devServer.proxy dalam fail config/index.js Contohnya adalah seperti berikut:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

Maksud konfigurasi ini ialah semua permintaan bermula dengan /api. akan menjadi Proksi kepada http://localhost:3000. Dengan cara ini, kita boleh mengakses antara muka hujung belakang dalam halaman hujung hadapan.

2. Isu CORS perkhidmatan backend

Selain dasar asal yang sama penyemak imbas, perkhidmatan backend itu sendiri mungkin juga mempunyai dasar CORS (Cross-Origin Resource Sharing) yang ditetapkan . Ini juga boleh menyebabkan halaman hujung hadapan tidak dapat mengakses antara muka hujung belakang.

Untuk menyelesaikan masalah ini, kami boleh menggunakan kaedah berikut:

(1) Tetapkan pengepala Access-Control-Allow-Origin di bahagian belakang

Jika bahagian belakang membenarkan semua asal Untuk akses, kita boleh menetapkan pengepala Access-Control-Allow-Origin pada bahagian belakang Contoh adalah seperti berikut:

Access-Control-Allow-Origin: *

Maksud konfigurasi ini adalah untuk membenarkan halaman hujung hadapan daripada semua. sumber untuk mengakses antara muka ini. Sudah tentu, ia juga boleh ditetapkan kepada nama domain tertentu, seperti:

Access-Control-Allow-Origin: http://localhost:8080

Kaedah ini sangat mudah, tetapi perlu diingat bahawa membuka semua sumber mungkin mempunyai masalah keselamatan, jadi disyorkan untuk menggunakan nama domain tertentu dalam persekitaran pengeluaran.

(2) Gunakan kaedah jsonp untuk meminta dalam Vue

Jika hujung belakang tidak membenarkan bahagian hadapan meminta terus antara muka, kami boleh menggunakan kaedah jsonp untuk melaksanakan permintaan merentas domain.

Dalam Vue, anda boleh menggunakan perpustakaan vue-jsonp untuk membuat permintaan jsonp. Contohnya:

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.jsonp('http://example.com/data', {}).then((response) => {
  console.log(response)
})

Permintaan ini akan menambah parameter panggil balik secara automatik pada alamat antara muka yang diakses, dengan itu merealisasikan permintaan merentas domain.

3. Isu rangkaian

Akhir sekali, kami juga perlu mempertimbangkan isu rangkaian. Kadangkala, antara muka memang boleh diakses seperti biasa, tetapi bahagian hadapan tidak boleh mengakses antara muka bahagian belakang kerana masalah rangkaian.

Dalam kes ini, kami boleh menyemak tetapan rangkaian atau menggunakan alat untuk diagnosis rangkaian. Sebagai contoh, anda boleh menggunakan arahan ping untuk mendiagnosis rangkaian dalam Windows:

ping example.com

Jika terdapat masalah dengan rangkaian, kami boleh menyelesaikan masalah dengan membaiki rangkaian atau menggantikan rangkaian.

Ringkasan

Perkara di atas ialah masalah dan penyelesaian tidak dapat mengakses antara muka bahagian belakang selepas penggunaan dalam projek Vue. Perlu diingatkan bahawa situasi setiap projek adalah berbeza, jadi ia perlu dinyahpepijat dan diselesaikan mengikut situasi tertentu. Jika tiada penyelesaian di atas dapat menyelesaikan masalah, anda boleh mempertimbangkan untuk mendapatkan bantuan daripada kakitangan teknikal yang berkaitan.

Atas ialah kandungan terperinci Antara muka pelayan tidak boleh diakses selepas penggunaan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!