Berkongsi pengalaman dalam pemprosesan permintaan merentas domain dalam pembangunan projek Vue

Dengan perkembangan berterusan dan populariti teknologi hadapan, Vue, sebagai salah satu daripadanya, telah mendapat lebih banyak perhatian dan aplikasi. Dalam pembangunan projek Vue, masalah permintaan merentas domain sering dihadapi Bagaimana menanganinya supaya projek dapat berjalan seperti biasa? Artikel ini akan berkongsi beberapa pengalaman pemprosesan permintaan merentas domain dalam pembangunan projek Vue berdasarkan pengalaman peribadi.

Pertama sekali, apakah permintaan merentas domain? Ringkasnya, halaman web di bawah satu nama domain tidak boleh mengakses sumber di bawah nama domain lain. Khususnya, apabila bahagian hadapan dan bahagian belakang dipisahkan, apabila aplikasi bahagian hadapan (seperti aplikasi Vue) memulakan permintaan kepada API bahagian belakang, memandangkan kedua-duanya berada di bawah nama domain yang berbeza, ia akan dihadkan oleh dasar asal yang sama penyemak imbas dan tidak boleh diakses secara normal. Pada masa ini, anda perlu menggunakan beberapa cara untuk mengendalikan permintaan merentas domain.

1. Gunakan proksi

Salah satu cara biasa untuk mengendalikan permintaan merentas domain ialah menggunakan proksi. Iaitu, tetapkan alamat pelayan proksi dalam fail konfigurasi aplikasi Vue, mula-mula mulakan permintaan kepada pelayan proksi, dan kemudian pelayan proksi memajukannya ke API bahagian belakang. Dengan cara ini, aplikasi bahagian hadapan biasanya boleh meminta data daripada API bahagian belakang. Dalam projek Vue, anda boleh membuat tetapan berikut dalam vue.config.js: vue.config.js中进行如下设置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '/api': '/'
        }
      }
    }
  }
}

其中，target参数指向后端API的地址，changeOrigin指示是否修改请求头中的Origin属性，pathRewrite用于重写请求路径，将以/api开头的路径替换成以/开头的路径。

二、使用JSONP

JSONP（JSON with Padding）是一种借助<script>标签的GET请求实现跨域请求的方法。具体实现是，在前端应用中创建一个<script>标签，将请求的URL设置为后端API的URL，并在URL中传递一个回调函数名，后端API在返回数据时，将数据包裹在该回调函数名的函数调用中返回，前端应用便可以通过该回调函数名获取数据了。在Vue项目中，可以通过如下方式实现JSONP请求：

export function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let params = ''
  for (let key in data) {
    params += `${key}=${data[key]}&`
  }
  url += '?' + params
  script.src = url + 'callback=' + callback
  document.body.appendChild(script)
  // 移除script标签
  script.onload = function () {
    document.body.removeChild(script)
  }
}

其中，url参数为后端API的地址，data参数为请求参数，callback参数为回调函数名。该方法通过创建一个<script>标签的方式发起GET请求，并将请求结果作为函数调用返回给回调函数。

三、使用CORS

CORS（Cross-Origin Resource Sharing）是一种标准的跨域请求解决方案，主要涉及浏览器和服务器之间的交互。通过在服务器端配置响应头中的Access-Control-Allow-Origin属性，可以允许前端应用跨域访问后端API。在Vue项目中，可以设置XHR请求的withCredentials属性为true，发起CORS请求。具体实现如下：

export function xhr (method, url, data, headers) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      }
    }
    xhr.open(method, url, true)
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.send(data)
  })
}

其中，method参数为请求方法，url参数为请求地址，data参数为请求参数，headers参数为请求头。该方法通过创建一个XMLHttpRequest对象，设置其withCredentialsrrreee

Antaranya, parameter target menghala ke alamat API bahagian belakang, dan changeOrigin menunjukkan sama ada untuk mengubah suai atribut Origin dalam pengepala permintaan pathRewrite digunakan untuk menulis semula laluan permintaan dan akan digantikan dengan laluan bermula dengan /api ke laluan bermula dengan /.

2. Gunakan JSONP🎜🎜JSONP (JSON dengan Padding) ialah kaedah untuk melaksanakan permintaan merentas domain dengan bantuan permintaan GET dengan teg <script>. Pelaksanaan khusus adalah untuk mencipta teg <script> dalam aplikasi bahagian hadapan, menetapkan URL yang diminta kepada URL API bahagian belakang dan menghantar nama fungsi panggil balik dalam URL, dan API hujung belakang kembali Apabila menerima data, bungkus data dalam panggilan fungsi nama fungsi panggil balik dan kembalikannya Aplikasi hujung hadapan boleh mendapatkan data melalui nama fungsi panggil balik. Dalam projek Vue, permintaan JSONP boleh dilaksanakan dengan cara berikut: 🎜rrreee🎜 Antaranya, parameter url ialah alamat API back-end, data parameter ialah parameter permintaan, dan Parameter panggilan balik ialah nama fungsi panggil balik. Kaedah ini memulakan permintaan GET dengan mencipta teg <script> dan mengembalikan hasil permintaan kepada fungsi panggil balik sebagai panggilan fungsi. 🎜🎜3. Gunakan CORS🎜🎜CORS (Cross-Origin Resource Sharing) ialah penyelesaian permintaan merentas domain standard, yang terutamanya melibatkan interaksi antara penyemak imbas dan pelayan. Dengan mengkonfigurasi atribut Access-Control-Allow-Origin dalam pengepala respons di bahagian pelayan, aplikasi bahagian hadapan boleh dibenarkan untuk mengakses API bahagian belakang merentas domain. Dalam projek Vue, anda boleh menetapkan atribut withCredentials permintaan XHR kepada benar untuk memulakan permintaan CORS. Pelaksanaan khusus adalah seperti berikut: 🎜rrreee🎜 Antaranya, parameter method ialah kaedah permintaan, parameter url ialah alamat permintaan, data code> parameter ialah parameter permintaan, dan <code parameter>headers ialah pengepala permintaan. Kaedah ini mencipta objek XMLHttpRequest, menetapkan atribut withCredentialsnya kepada benar, memulakan permintaan XHR dan mengembalikan hasil Promise selepas respons selesai. 🎜🎜Ringkasnya, dengan menggunakan proksi, JSONP dan CORS untuk mengendalikan permintaan merentas domain, projek Vue boleh berinteraksi dengan data bahagian hadapan dan bahagian belakang secara normal, meningkatkan kecekapan pembangunan dan pengalaman pengguna. Dalam aplikasi tertentu, kaedah yang sesuai boleh dipilih mengikut keperluan projek dan antara muka API bahagian belakang. 🎜

Atas ialah kandungan terperinci Berkongsi pengalaman dalam pemprosesan permintaan merentas domain dalam pembangunan projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!