Pemajuan proksi tidak digunakan dalam vue

Apabila membangun dengan Vue, kami selalunya perlu berinteraksi dengan pelayan API bahagian belakang. Untuk mengelakkan masalah CORS (Cross-Origin Resource Sharing), pemajuan proksi biasanya digunakan dalam konfigurasi Vue untuk memajukan permintaan. Walau bagaimanapun, kadangkala kita perlu berinteraksi secara langsung dengan pelayan API tanpa menggunakan proksi Apakah yang perlu kita lakukan dalam kes ini?

1 Gunakan pustaka pihak ketiga

Jika anda tidak mahu menggunakan konfigurasi proksi lalai VueCLI, anda boleh memilih untuk menggunakan pustaka pihak ketiga untuk membuat permintaan. Sebagai contoh, kita boleh menggunakan Axios untuk berinteraksi secara langsung dengan pelayan API dengan menetapkan pengepala permintaan dan parameter yang berkaitan apabila membuat permintaan.

Pertama, kita perlu memasang Axios dalam projek Vue:

npm install axios --save

Dalam komponen yang perlu membuat permintaan, kita boleh menggunakan Axios seperti ini:

import axios from 'axios'

axios.get('/api/getUserInfo', {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
})

Dalam kod, kami Gunakan kaedah get Axios untuk membuat permintaan, dan tetapkan pengepala permintaan kepada contentType kepada application/json. Dengan cara ini, anda boleh terus memulakan permintaan kepada pelayan API dan mendapatkan data.

2. Gunakan Pemalam Webpack

Kami juga boleh menggunakan pemalam Webpack untuk memajukan permintaan tanpa menggunakan proksi. Pelaksanaan khusus adalah untuk menyediakan pelayan tempatan untuk menggantikan pelayan proksi dengan bekerjasama dengan pemalam perisian tengah ekspres dan http-proksi-pertengahan untuk mencapai akses kepada pelayan API.

Pertama, kita perlu memasang pemalam yang berkaitan:

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

Buat fail server.js baharu dalam direktori akar projek untuk memulakan pelayan setempat:

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

const app = express()

app.use('/api', proxy({
  target: 'http://api.server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.listen(3000, () => {
  console.log('Server is running at localhost:3000')
})

Di sini kita lulus Gunakan http-proxy-middleware untuk memajukan pelayan API, dan menetapkan sasaran untuk menentukan pelayan sasaran.

Kemudian, tambahkan arahan skrip dalam fail package.json untuk memulakan pelayan setempat:

"scripts": {
  "dev-server": "node server.js"
}

Akhir sekali, tetapkan baseURL kepada http:// dalam konfigurasi axios dalam localhost projek Vue :3000/api, anda boleh terus memulakan permintaan kepada pelayan API:

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'

axios.get('/getUserInfo').then(res => {
  console.log(res)
})

Dengan cara ini, kami boleh terus memulakan permintaan kepada pelayan API melalui http://localhost:3000/api/getUserInfo alamat.

Ringkasan

Di atas ialah dua kaedah menggunakan Vue untuk pembangunan tanpa menggunakan pemajuan proksi. Walaupun menggunakan pemajuan proksi ialah cara yang berkesan untuk menyelesaikan CORS, dalam beberapa kes adalah lebih mudah untuk berinteraksi secara langsung dengan pelayan API. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Pemajuan proksi tidak digunakan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!