Bagaimana untuk menyelesaikan proksi merentas domain vue2.0

Dalam model pembangunan di mana hujung hadapan dan belakang dipisahkan, hujung hadapan biasanya memperoleh data melalui permintaan Ajax ke antara muka latar belakang. Walau bagaimanapun, disebabkan oleh sekatan dasar asal yang sama, bahagian hadapan hanya boleh meminta antara muka di bawah nama domain yang sama dan tidak boleh meminta secara langsung antara muka di bawah nama domain lain. Ini adalah apa yang dipanggil masalah merentas domain.

Untuk menyelesaikan masalah merentas domain, kami boleh menggunakan teknologi proksi merentas domain. Dalam Vue2.0, anda boleh melaksanakan proksi merentas domain dengan mengkonfigurasi Jadual proksi pek web. Sekarang kami akan memperkenalkan secara terperinci cara mengkonfigurasi proksi merentas domain dalam Vue2.0.

1. Pasang http-proxy-middleware

http-proxy-middleware ialah perisian tengah proksi Node.js yang boleh memajukan proksi permintaan ke pelayan sasaran untuk mencapai Cross- permintaan asal. Kita perlu memasang http-proxy-middleware terlebih dahulu:

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

2. Configure proxyTable

Dalam projek Vue2.0, fail konfigurasi webpack biasanya terletak dalam direktori akar projek fail config/index.js. Kami perlu mengkonfigurasi ProxyTable dalam fail ini:

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

Dalam kod di atas, kami mengkonfigurasi peraturan proksi kepada permintaan proksi bermula dengan /api ke pelayan sasaran yang ditentukan. Jika URL yang diminta ialah /api/user, ia akan diproksikan ke antara muka http://127.0.0.1:3000/user. changeOrigin digunakan untuk menetapkan medan hos dalam pengepala permintaan, pathRewrite digunakan untuk menulis semula laluan dan mengalih keluar awalan /api.

3. Konfigurasikan package.json

Dalam fail package.json kita perlu menambah kod berikut:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

Ini akan membolehkan kita menggunakan npm jalankan Perintah dev memulakan pelayan pembangunan, dan peraturan proksi dimuatkan dan digunakan secara automatik.

4. Menggunakan proksi dalam fail Vue

Dalam komponen fail tunggal Vue yang perlu menggunakan permintaan merentas domain, kami boleh terus menggunakan awalan /api yang ditakrifkan dalam proksi peraturan Untuk meminta data, seperti ditunjukkan di bawah:

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

Di atas ialah langkah terperinci untuk mengkonfigurasi proksi merentas domain dalam Vue2.0. Dengan menggunakan peraturan proksi, kami berjaya meminta antara muka di bawah nama domain lain dalam persekitaran pembangunan, yang memudahkan pembangunan kolaboratif bahagian hadapan dan belakang.

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