Mari kita bincangkan tentang punca dan penyelesaian pelaporan ralat merentas domain Penghala Vue

Pelaporan ralat merentas domain Penghala Vue ialah masalah yang sangat biasa. Apabila menggunakan Penghala Vue, jika anda mengakses tapak web atau API lain merentas domain, ralat merentas domain akan berlaku. Artikel ini akan memperkenalkan punca dan penyelesaian ralat merentas domain dalam Penghala Vue.

1. Sebab untuk merentas domain

Dalam penyemak imbas, dasar asal yang sama ialah mekanisme keselamatan yang mengehadkan JavaScript di bawah tapak web untuk hanya mengakses sumber di bawah tapak tersebut. Dasar asal yang sama tidak membenarkan akses merentas domain kepada data dalam domain lain melalui skrip, seperti menggunakan Ajax dalam halaman di bawah satu nama domain untuk memanggil antara muka API di bawah nama domain lain. Ini kerana berbuat demikian menimbulkan isu keselamatan dan membolehkan penyerang mencuri maklumat sensitif pengguna melalui skrip merentas domain.

2. Pelaporan ralat merentas domain vue-router

Penghalaan Vue Router adalah berasaskan penyemak imbas, jadi ia juga dihadkan oleh dasar asal yang sama. Apabila kami menggunakan Penghala Vue dalam komponen Vue untuk mengakses tapak atau antara muka API yang lain, ralat merentas domain akan berlaku. Mesej ralat biasanya:

Akses kepada XMLHttpRequest di 'http://xxxxxx' dari asal 'http://localhost:8080' telah disekat oleh dasar CORS: Tiada 'Access-Control-Allow-Origin ' pengepala hadir pada sumber yang diminta.

Ralat merentas domain ini menggesa ralat CORS, kerana penyemak imbas mengehadkan permintaan kepada nama domain lain dan tapak lain tidak membenarkan permintaan merentas domain untuk sumber tapak anda. Jika anda menggunakan pelayan tempatan, anda mungkin menghadapi masalah ini kerana pelayan anda mungkin tidak dikonfigurasikan dengan CORS, yang diperlukan untuk permintaan merentas domain Vue Router.

3. Kaedah untuk menyelesaikan laporan ralat merentas domain

1. Gunakan proksi belakang

Proksi belakang boleh memintas sekatan merentas domain. Dengan menghantar permintaan ke tapak lain dan menerima respons, pelayan melengkapkan permintaan dan respons, dan masing-masing memproses sumber yang diminta dan data respons. Dalam kod bahagian hadapan, kami hanya menghantar permintaan ke URL proksi bahagian belakang dan kemudian dalam proksi bahagian belakang kami menghantar permintaan kepada URL sasaran dan mengembalikan respons yang diterima kepada bahagian hadapan. Berikut ialah contoh kod:

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. Mengkonfigurasi CORS

Jika anda mahu mengakses terus API atau sumber merentas domain melalui penyemak imbas, anda boleh mengkonfigurasi CORS pelayan sendiri. Tetapkan pengepala Access-Control-Allow-Origin pada pelayan untuk membenarkan permintaan silang asal. Berikut ialah beberapa contoh konfigurasi CORS biasa:

• Node.js (Express):

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

  Salin selepas log masuk

• Apache:

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

  Salin selepas log masuk

• Nginx:

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

  Salin selepas log masuk

4. Ringkasan

Pelaporan ralat merentas domain Vue Router adalah masalah yang sangat biasa apabila digunakan Apabila membangunkan rangka kerja Vue.js, fahami masalah dengan mendalam, bantu selesaikan masalah merentas domain dan gunakan proksi bahagian belakang dan konfigurasi CORS untuk mengelakkan ralat CORS, yang bukan sahaja dapat meningkatkan kecekapan pembangunan, tetapi juga meningkatkan kualiti kod dengan berkesan. Di atas ialah sebab ralat merentas domain yang dilaporkan oleh Vue Router dan kedua-dua penyelesaian.

Atas ialah kandungan terperinci Mari kita bincangkan tentang punca dan penyelesaian pelaporan ralat merentas domain Penghala Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!