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

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!