Mengapa menggunakan proksi terbalik Vue?

Dalam vue, kerana proksi terbalik boleh menyembunyikan pelayan sebenar dan memintas masalah merentas domain yang disebabkan oleh permintaan terus URL sebenar, adalah perlu untuk menggunakan proksi terbalik untuk mengelakkan masalah proksi terbalik Ia sering digunakan dalam senario di mana bahagian hadapan dan bahagian belakang dibangunkan secara berasingan. Bahagian hadapan perlu menyambung ke antara muka bahagian belakang dan menghantar permintaan daripada sumber yang sama ke pelayan proksi terbalik.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Mengapa menggunakan proksi songsang vue

Senario penggunaan proksi songsang

Dalam senario pembangunan bahagian hadapan dan belakang yang berasingan, terdapat pelayan di hujung hadapan (halaman Statik disediakan), bahagian belakang mempunyai pelayan (menyediakan antara muka)

Pada masa ini, bahagian hadapan perlu menyambung ke antara muka bahagian belakang dan masalah merentas domain akan berlaku

Dalam persekitaran keluaran, jika terdapat Masalah merentas domain, gunakan nginx

Jika kod bahagian hadapan dan bahagian belakang berada pada pelayan yang sama, tiada masalah merentas domain

Penyelesaian merentas domain

jsonp (Penyelesaian bahagian depan)

CORS (penyelesaian bahagian belakang): perkongsian sumber silang

Proksi songsang (penyelesaian frontend)

Apakah itu proksi songsang

Proksi songsang menyembunyikan pelayan sebenar, supaya penyemak imbas masih dari asal yang sama

Prinsip proksi songsang

Buat http dengan memalsukan permintaan Permintaan adalah daripada sumber yang sama, dan kemudian permintaan daripada sumber yang sama dihantar ke pelayan proksi terbalik, dan sebaliknya pelayan proksi meminta URL sebenar, dengan itu memintas masalah merentas domain yang disebabkan oleh meminta terus URL sebenar

Konfigurasi proksi songsang

proksi terbalik vue-cli3

Cipta fail vue.config.js baharu dalam direktori akar projek

Kod Konfigurasi:

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

Proses pelaksanaan proksi terbalik:

/api dalam alamat akses axios ditukar kepada sasaran /api:

(cth: http:localhost:9000 Tukar /api/goods kepada http://localhost:80/api/goods)

Cipta pelayan maya

Alih keluar /api:

(cth: http:// localhost:80/goods)

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Mengapa menggunakan proksi terbalik Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!