Cara menangani isu merentas domain apabila Vue berada dalam talian

Apabila membangunkan aplikasi Vue, anda akan menghadapi pemisahan bahagian hadapan dan belakang, dan anda mungkin menghadapi masalah merentas domain. Masalah merentas domain biasanya tidak berlaku apabila membangun secara tempatan, tetapi apabila projek itu berjalan dalam talian, jika bahagian depan dan belakang digunakan pada pelayan yang berbeza, masalah merentas domain akan berlaku. Dalam artikel ini, kami akan mempunyai pemahaman yang mendalam tentang latar belakang dan penyelesaian kepada masalah merentas domain Vue dalam talian untuk menangani masalah ini dengan lebih baik.

Apakah itu merentas domain?

Merentas domain merujuk kepada menggunakan permintaan merentas domain apabila mengakses sumber pada pelayan. Terdapat banyak jenis permintaan merentas domain, yang biasa termasuk akses merentas domain kepada sumber, penulisan kuki merentas domain, antara muka panggilan merentas domain, dsb. Di bawah dasar keselamatan penyemak imbas, permintaan merentas domain dilarang secara lalai kerana permintaan merentas domain mungkin membawa risiko keselamatan.

Selesaikan masalah merentas domain Vue dalam talian

1 Pelayan proksi

Pelayan proksi memajukan permintaan ke pelayan di mana antara muka terletak apabila bahagian hadapan. meminta antara muka bahagian belakang Kod bahagian hadapan menggunakan alamat pelayan proksi sebagai laluan permintaan untuk memastikan permintaan itu berjalan seperti biasa. Menggunakan pelayan proksi, bahagian hadapan boleh memajukan permintaan ke antara muka, memproksi kandungan pulangan antara muka bahagian belakang, mengubah suai kandungan pulangan dan menambah beberapa parameter pengubahsuaian atau logik pemprosesan sebelum dan selepas permintaan. Kebanyakan pelayan proksi ditulis oleh kakitangan bahagian belakang dan boleh dipanggil oleh projek bahagian hadapan.

Terdapat banyak jenis pelayan proksi, seperti Nginx, Alibaba Cloud API Gateway, Apache, dll. Apabila projek Vue masuk dalam talian, gunakan pelayan proksi untuk menghalakan laluan akses semua antara muka ke nama domain yang sama Contohnya, ubah hala semua laluan permintaan antara muka ke "/api" dan gunakan "/api" sebagai laluan permintaan. Kemudian tentukan peraturan pemajuan pada pelayan proksi untuk memajukan permintaan bermula dengan "/api" ke pelayan di mana antara muka bahagian belakang terletak untuk menyelesaikan masalah merentas domain.

Konfigurasikan pelayan proksi dalam projek Vue:

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP ialah penyelesaian untuk permintaan JavaScript dan merentas domain. Pelanggan menghantar permintaan kepada pelayan dengan mencipta teg <script> secara dinamik, menambah URL yang diminta (alamat antara muka) dan fungsi panggil balik sebagai parameter. Selepas pelayan menerima permintaan, ia mengembalikan skrip JavaScript, fungsi panggil balik dan membawa data yang diperlukan. Akhir sekali, pelanggan memproses data yang dikembalikan dalam fungsi panggil balik. JSONP ialah penyelesaian merentas domain yang lebih fleksibel, tetapi ia hanya boleh menyokong permintaan GET dan hanya boleh meminta data dalam format teks biasa.

Menggunakan JSONP dalam projek Vue:

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS (Cross-Origin Resource Sharing) ialah penyelesaian rasmi untuk permintaan merentas domain pelayan aplikasi boleh dibenarkan untuk melaksanakan kawalan akses merentas domain, membenarkan penyemak imbas menyelesaikan permintaan merentas domain dengan selamat. Untuk menggunakan CORS, anda hanya perlu menambah medan Access-Control-Allow-Origin pada maklumat pengepala respons di latar belakang dan tetapkannya kepada '*' atau nama domain yang ditentukan Kemudian pelayar akan memprosesnya berdasarkan pengepala respons maklumat, untuk menyelesaikan masalah permintaan domain.

Tambah maklumat pengepala respons di latar belakang:

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket ialah protokol komunikasi dupleks penuh, dalam permintaan merentas domain Ia memainkan penyelesaian yang sangat baik. WebSocket melakukan jabat tangan melalui protokol HTTP, dan selepas sambungan dibuat, data boleh dipindahkan dalam kedua-dua arah antara klien dan pelayan.

Menggunakan WebSocket dalam projek Vue:

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

Ringkasan

Di atas ialah empat kaedah untuk menyelesaikan masalah merentas domain Vue dalam talian: pelayan proksi, JSONP, CORS dan WebSocket . Senario yang berbeza dan memilih penyelesaian yang berbeza boleh membantu kami menyelesaikan masalah merentas domain dengan lebih baik apabila Vue pergi dalam talian dan menjadikan projek kami lebih lancar. Perlu diingatkan bahawa apabila menggunakan kaedah di atas, anda mesti memberi perhatian kepada keselamatan untuk memastikan pelancaran projek berjalan lancar.

Atas ialah kandungan terperinci Cara menangani isu merentas domain apabila Vue berada dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!