Masalah merentas domain yang dihadapi dalam pembangunan teknologi Vue dan penyelesaiannya

Masalah dan penyelesaian merentas domain yang dihadapi dalam pembangunan teknologi Vue

Abstrak: Artikel ini akan memperkenalkan isu yang mungkin berlaku semasa pembangunan Vue teknologi Masalah merentas domain yang dihadapi dan penyelesaiannya. Kami akan mulakan dengan perkara yang menyebabkan asal silang, kemudian merangkumi beberapa penyelesaian biasa dan memberikan contoh kod khusus.

1 Punca masalah merentas domain
Dalam pembangunan web, disebabkan oleh dasar keselamatan penyemak imbas, penyemak imbas akan mengehadkan permintaan daripada satu sumber (domain, protokol atau port) kepada sumber sumber yang lain. . Ini adalah apa yang dipanggil "dasar asal yang sama". Apabila kami membangunkan teknologi Vue dan antara muka bahagian hadapan dan bahagian belakang tidak berada dalam domain yang sama, kami akan menghadapi masalah merentas domain.

2. Penyelesaian

1. Proksi merentas domain
   Menggunakan pelayan proksi untuk memajukan permintaan API ialah kaedah biasa untuk menyelesaikan masalah merentas domain. Kami boleh mengkonfigurasi sifat proxyTable dalam vue.config.js untuk menunjuk ke pelayan proksi. Berikut ialah kod sampel:

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. JSONP
   JSONP ialah kaedah permintaan merentas domain yang meminta jalur dengan mencipta atribut <script>标签，使用src secara dinamik URL fungsi panggil balik. Apabila bahagian belakang mengembalikan data, ia akan mengembalikan data sebagai parameter fungsi panggil balik, dan bahagian hadapan memproses data yang dikembalikan melalui fungsi panggil balik. Berikut ialah contoh kod:

// 前端代码
import jsonp from 'jsonp'

jsonp('http://api.example.com?callback=handleData', (err, data) => {
  if (err) {
    console.error(err)
  } else {
    handleData(data)
  }
})

function handleData(data) {
  console.log('处理后的数据：', data)
}

// 后端代码
handleData(req, res) {
  const data = {
    name: 'Vue',
    version: '2.6.10'
  }
  const callback = req.query.callback
  res.send(`${callback}(${JSON.stringify(data)})`)
}

3. CORS
   CORS ialah cara yang disyorkan secara rasmi untuk mengendalikan isu merentas domain. Ia memerlukan menetapkan maklumat pengepala respons yang sepadan pada bahagian belakang. Berikut ialah kod sampel:

// 后端代码
handleData(req, res) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  res.setHeader('Access-Control-Max-Age', '86400')
  // ...
  // 处理请求并返回数据
}

4. Proksi terbalik Nginx
   Jika projek anda telah digunakan ke persekitaran Nginx, anda boleh mengkonfigurasi Nginx untuk mencapai Proksi terbalik menyelesaikan isu merentas domain. Berikut ialah contoh konfigurasi Nginx:

location /api {
  proxy_pass http://api.example.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  # 允许跨域访问
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
  add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
}

Kesimpulan
Artikel ini memperkenalkan masalah merentas domain yang mungkin dihadapi dalam pembangunan teknologi Vue dan penyelesaiannya. Kami membincangkan empat penyelesaian biasa: proksi merentas domain, JSONP, CORS dan proksi terbalik Nginx, dan memberikan contoh kod yang sepadan. Dalam pembangunan sebenar, kita boleh memilih penyelesaian yang sesuai untuk menyelesaikan masalah merentas domain mengikut keperluan projek. Saya harap artikel ini akan membantu semua orang yang menghadapi isu merentas domain dalam pembangunan teknologi Vue.

Rujukan:

• Vue.js dokumentasi rasmi: https://vuejs.org/
• Dokumentasi rasmi Nginx: https : //nginx.org/

Atas ialah kandungan terperinci Masalah merentas domain yang dihadapi dalam pembangunan teknologi Vue dan penyelesaiannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!