2023Vue项目开发中的跨域请求处理经验分享

随着前端技术的不断发展和普及，Vue作为其中的一员受到越来越多的关注和应用。在Vue项目开发中，经常会遇到跨域请求的问题，这时候如何处理才能让项目正常运行呢？本文将结合个人经验分享一些Vue项目开发中的跨域请求处理经验。

首先，什么是跨域请求？简单来说，就是一个域名下的网页无法访问另一个域名下的资源。具体体现在前后端分离的情况下，前端应用（例如Vue应用）向后端API发起请求时，由于两者处于不同的域名下，会受到浏览器的同源策略限制而无法正常访问。这时候，就需要使用一些手段来处理跨域请求。

一、使用代理

常见的处理跨域请求的方法之一是使用代理。即在Vue应用的配置文件中设置代理服务器地址，先向代理服务器发起请求，再由代理服务器转发给后端API。这样，前端应用就可以正常请求后端API的数据了。在Vue项目中，可以在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对象，设置其withCredentials属性为true，发起XHR请求，并在响应完成后返回Promise结果。

综上，通过使用代理、JSONP和CORS这三种方式处理跨域请求，可以让Vue项目正常进行前后端数据交互，提高开发效率和用户体验。在具体应用中，可以根据项目需求和后端API接口的情况选择合适的方式进行处理。