Bagaimana untuk menyelesaikan proksi merentas domain vue20

Dengan pembangunan berterusan dan kemajuan pembangunan web, semakin banyak teknologi dan rangka kerja bahagian hadapan digunakan secara meluas. Sebagai rangka kerja JavaScript moden, Vue.js telah menjadi pilihan popular untuk pembangunan bahagian hadapan. Dalam proses pembangunan aplikasi Vue.js, domain silang merupakan masalah yang sering dihadapi. Artikel ini akan memperkenalkan isu merentas domain dalam Vue.js 2.0 dan penyelesaiannya.

1. Apakah itu merentas domain

Dalam pembangunan aplikasi web, apabila halaman meminta akses kepada sumber nama domain lain daripada tapak web dengan satu nama domain, disebabkan pelayar yang sama-asalnya sekatan dasar, Sumber tidak boleh diperoleh dengan betul. Ini dipanggil domain silang.

Secara khusus, dasar asal yang sama ialah teras dan ciri keselamatan paling asas bagi penyemak imbas. Dasar asal yang sama memerlukan dua URL dibenarkan untuk mengakses satu sama lain hanya jika mereka mempunyai protokol, nama domain dan port yang sama Jika tidak, masalah merentas domain akan berlaku.

Dalam istilah orang biasa, katakan satu tapak web dipanggil tapak web A dan tapak web lain dipanggil tapak web B. Apabila tapak web A meminta data daripada tapak web B melalui penyemak imbas, memandangkan tapak web B tidak berada dalam domain tempat tapak web A terletak , lalai Dalam kes ini penyemak imbas akan menolak permintaan akses ini.

2. Isu merentas domain dalam Vue.js 2.0

Memandangkan Vue.js 2.0 ialah aplikasi satu halaman, persekitaran pembangunan dan pengeluaran lalainya menggunakan Pelayan Node.js tempatan untuk pembangunan dan ujian. Dalam kes ini, kami sering menghadapi masalah merentas domain.

Sebagai contoh, kami menggunakan axios untuk menghantar permintaan Ajax untuk meminta data JSON ke pelayan bahagian belakang Kodnya adalah seperti berikut:

import axios from 'axios'

axios.get('http://localhost:8080/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Dalam kod di atas, kami cuba menghantar permintaan. ke pelayan dengan alamat http://localhost:8080/api/data Hantar permintaan GET, tetapi memandangkan penyemak imbas tidak membenarkan akses merentas domain tersebut secara lalai, ralat akan berlaku semasa operasi.

3. Bagaimana untuk menyelesaikan masalah merentas domain

Untuk menyelesaikan masalah merentas domain, kita perlu menentukan pelayan proksi, mulakan pelayan secara setempat, dan kemudian memajukan semua merentas domain permintaan kepada pelayan atasan. Oleh kerana pelayan proksi dan pelayan bahagian belakang kedua-duanya berada dalam domain yang sama, tiada masalah merentas domain.

Dalam Vue.js 2.0, kita boleh menggunakan proxyTable item konfigurasi dalam webpack-dev-server untuk menentukan pelayan proksi. proxyTable ialah objek, setiap atribut di dalamnya adalah peraturan proksi, dalam bentuk:

proxyTable: {
  '/api': 'http://localhost:9000'
}

Dalam kod di atas, kami memajukan semua permintaan bermula dengan /api ke pelayan dengan alamat http://localhost:9000 unggul.

4. Contoh kod

Berikut ialah contoh kod tentang cara menggunakan proxyTable untuk mengkonfigurasi pelayan proksi:

// 代码文件：vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000', // 代理目标地址
        pathRewrite: { '/api': '' }, // 请求路径重写
        changeOrigin: true, // 允许跨域
      },
    },
  },
}

Dalam kod di atas, kita perlu mengkonfigurasi terlebih dahulu Vue.js 2.0 Tambah fail vue.config.js dalam direktori akar projek, yang digunakan untuk mengkonfigurasi pelayan dalam persekitaran pembangunan. Dalam devServer, kami menambahkan atribut proxy, iaitu objek yang mengandungi peraturan proksi kami. Kami boleh menetapkan alamat sasaran proksi mengikut situasi sebenar API bahagian belakang, seperti http://localhost:9000.

Kami juga boleh menetapkan atribut pathRewrite untuk menentukan peraturan penulisan semula untuk laluan permintaan. Contohnya, apabila laluan permintaan kami ialah /api/data, kami boleh menggunakan { '/api': '' } untuk mengalih keluar awalan /api dan laluan permintaan menjadi /data.

Akhir sekali, kita juga perlu menetapkan atribut changeOrigin kepada true untuk membenarkan akses merentas domain. Kemudian kami dengan senang hati boleh menggunakan axios untuk menghantar permintaan merentas domain:

import axios from 'axios'

axios.get('/api/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

5. Ringkasan

Artikel ini memperkenalkan isu merentas domain dalam Vue.js 2.0 dan penyelesaiannya. Disebabkan oleh sekatan dasar asal yang sama, kami tidak boleh mengakses sumber secara langsung di bawah nama domain lain daripada aplikasi bahagian hadapan, tetapi kami boleh menggunakan pelayan proksi untuk memintas masalah ini. Dalam Vue.js 2.0, kita boleh menggunakan proxyTable item konfigurasi webpack-dev-server untuk menentukan pelayan proksi untuk menyelesaikan masalah merentas domain.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan proksi merentas domain vue20. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!