Analisis ringkas tentang punca dan penyelesaian kepada masalah merentas domain Vue

Dengan pembangunan teknologi bahagian hadapan, Vue telah menjadi rangka kerja JavaScript yang sangat digemari ramai pembangun, bukan sahaja kerana kemudahan penggunaan, kecekapan dan fleksibilitinya, tetapi juga kerana ekosistem sokongannya yang kaya. Walau bagaimanapun, pada masa yang sama, apabila skala projek bahagian hadapan menjadi lebih besar dan lebih besar, masalah penggunaan projek Vue telah muncul secara beransur-ansur Masalah yang paling biasa ialah masalah merentas domain. Artikel ini akan memperkenalkan punca, penyelesaian dan amalan berkaitan masalah merentas domain Vue.

1. Mengapakah masalah merentas domain Vue wujud?

Sebab mengapa terdapat masalah merentas domain dalam projek Vue adalah kerana dasar asal yang sama penyemak imbas, yang bermaksud bahagian hadapan tidak boleh memulakan permintaan merentas domain secara langsung. Dasar asal yang sama ialah dasar keselamatan asas, tetapi ia juga akan menyebabkan masalah tertentu untuk pembangun Vue semasa penggunaan. Secara umumnya, penyemak imbas akan menentukan sama ada permintaan adalah asal yang sama dengan menentukan sama ada protokol (http atau https), nama domain dan port kedua-dua URL adalah sama.

Contoh biasa masalah merentas domain dalam projek Vue ialah apabila projek bahagian hadapan meminta API bahagian belakang melalui AJAX, jika URL API bahagian belakang tidak berada dalam domain yang sama seperti URL projek Vue semasa, masalah merentas domain akan berlaku.

2. Bagaimana untuk menyelesaikan masalah merentas domain Vue?

Sekarang masalah itu telah dijelaskan, mari kita cari jalan untuk menyelesaikannya. Di bawah, kami akan memperkenalkan tiga kaedah biasa untuk menyelesaikan masalah merentas domain, yang juga merupakan tiga kaedah yang paling banyak digunakan.

1. Tetapkan CORS pada pelayan

Kami boleh menyelesaikan masalah merentas domain dengan menetapkan CORS pada pelayan. CORS, atau perkongsian sumber silang asal, ialah penyelesaian sebelah pelayan untuk masalah merentas domain. Pelayan memberitahu penyemak imbas permintaan nama domain yang dibenarkan dengan menetapkan pengepala Access-Control-Allow-Origin dalam respons HTTP. Apabila penyemak imbas mendapati bahawa nama domain yang diminta berada dalam julat akses yang dibenarkan, ia boleh berjaya mengembalikan hasil permintaan.

Kaedah pelaksanaan khusus adalah seperti berikut:

Tetapkan atribut Access-Control-Allow-Origin dalam pengepala respons bahagian belakang untuk membenarkan akses bahagian hadapan:

Access-Control-Allow-Origin: *

Dalam kod di atas, * menunjukkan bahawa semua sumber permintaan dibenarkan.

2. Gunakan atribut proxyTable bagi webpack-dev-server

Dalam Vue, kami boleh mengkonfigurasi proxyTable melalui webpack-dev-server untuk menyelesaikan masalah merentas domain semasa pembangunan. proxyTable boleh memproksi permintaan tempatan pembangun kepada pelayan, dengan berkesan menyelesaikan masalah merentas domain.

Jadual proksi dikonfigurasikan seperti berikut:

dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

Dalam kod di atas, /api menunjukkan permintaan yang perlu diproksi, sasaran menunjukkan alamat pelayan bahagian belakang yang perlu diproksi, dan changeOrigin: benar menunjukkan sama ada Untuk menukar sumber permintaan, pathRewrite digunakan untuk menulis semula laluan permintaan.

3. Gunakan JSONP untuk menyelesaikan masalah merentas domain

JSONP ialah penyelesaian merentas domain secara dinamik menambahkan teg skrip pada halaman web dan menggunakan teg skrip ini untuk mengakses merentas domain masalah antara muka, dapatkan hasil yang sepadan, dan hujung hadapan merangkumkan hasil permintaan dalam fungsi panggil balik dan mengembalikannya untuk melaksanakan permintaan merentas domain. Cara JSONP dilaksanakan ialah bahagian belakang mengembalikan sekeping kod JavaScript Kod ini akan memanggil fungsi panggil balik yang ditakrifkan oleh bahagian hadapan dan menghantar data sebagai parameter kepada fungsi panggilan balik fungsi panggil balik.

Berikut ialah pelaksanaan JSONP:

Kod bahagian belakang:

app.get('/jsonp', (req, res) => {
    const { data } = req.query;
    const callback = req.query.callback;
    const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
    res.end(result);
});

Kod bahagian hadapan:

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.append(script);
}

jsonp('http://localhost:3000/jsonp', function (res) {
    console.log(res);
});

3. Amalan merentas domain

Amalan 1: Gunakan webpack-dev-server untuk menyediakan ProxyTable untuk menyelesaikan masalah merentas domain

Mari kita ambil projek Vue bahagian hadapan untuk memulakan permintaan ke belakang -end API sebagai contoh untuk menerangkan cara menggunakan atribut Jadual proksi webpack-dev-server untuk menyelesaikan masalah merentas domain.

1. Pasang webpack-dev-server dan http-proxy-middleware

Pasang webpack-dev-server dan http-proxy-middleware dalam projek.

npm install --save-dev webpack-dev-server http-proxy-middleware

2. Perkenalkan http-proxy-middleware dalam fail konfigurasi webpack

const proxyMiddleware = require('http-proxy-middleware')

3 Gunakan proxyTable dalam konfigurasi webpack-dev-server

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

Dalam kod di atas, kami mengkonfigurasi proksi /api untuk memproksi permintaan ke port tempatan 3000.

4. Gunakan API permintaan proksi

Dalam kod projek Vue, kami hanya perlu menggunakan /api sebagai awalan URL, supaya permintaan itu berjaya diproksi ke port 3000 setempat.

axios.get('/api/users')

Amalan 2: Gunakan CORS untuk menyelesaikan masalah merentas domain dari bahagian belakang

Kami boleh menyediakan CORS di bahagian belakang untuk menyelesaikan masalah merentas domain. Di sini kita mengambil rangka kerja ekspres node.js sebagai contoh untuk diperkenalkan.

1. Pasang ekspres

Pasang ekspres dalam projek.

npm install express

2. Tetapkan CORS dalam fail server.js atau app.js

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
});

Kod di atas menetapkan CORS, membenarkan permintaan daripada semua sumber dikembalikan dengan jayanya.

3 Dalam API bahagian belakang, tambahkan tetapan CORS sebelumnya

app.get('/users', (req, res) => {
    const data = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Lily' }
    ];
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.json(data);
});

Dalam kod di atas, kami menambah atribut Access-Control-Allow-Origin dalam pengepala respons pelayan, Used untuk memberitahu penyemak imbas nama domain yang membenarkan permintaan.

4 Mulakan permintaan dalam projek Vue

Untuk permintaan Ajax dalam projek Vue, kami hanya perlu memulakan permintaan dengan cara biasa.

axios.get('/users').then(resp => {
    console.log(resp.data);
});

Kesimpulan

Masalah merentas domain Vue ialah masalah yang agak biasa, tetapi ia boleh diselesaikan dengan mudah selagi anda menguasai penyelesaiannya. Untuk isu merentas domain, kami boleh menetapkan CORS pada pelayan, menggunakan atribut proxyTable bagi webpack-dev-server atau menggunakan JSONP untuk menyelesaikan masalah. Artikel ini memperkenalkan penggunaan khusus ketiga-tiga kaedah ini melalui amalan, dan berharap pembaca akan memperoleh lebih banyak dalam amalan.

Atas ialah kandungan terperinci Analisis ringkas tentang punca dan penyelesaian kepada masalah merentas domain Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!