Vue3中如何处理跨域请求_vue3配置跨域

在前后分离的架构中，前端常常需要向后端发送跨域请求来获取数据，而跨域请求的处理是一个非常复杂的问题。Vue3框架本身并没有提供跨域请求的解决方案，因此需要自行实现。

首先，我们需要在后端设置允许跨域请求的响应头信息。可以使用CORS（跨域资源共享）技术，通过设置Access-Control-Allow-Origin等响应头信息来允许指定的前端网站进行跨域访问。

在Vue3中，可以使用axios库或者fetch API来发送跨域请求。这两个工具都支持Promise风格的API，可以方便地进行异步操作。

axios库，我们可以在main.js中进行配置：

import axios from 'axios'
Vue.prototype.$axios = axios.create({
  baseURL: 'http://localhost:8080/', // 后端接口地址
  timeout: 10000, // 超时时间
  withCredentials: true, // 允许携带cookie
})

其中，baseURL需要设置为后端接口的地址。timeout表示请求超时时间，withCredentials表示是否允许携带cookie。

fetch API，我们可以使用ES6的语法进行封装：

function request(url, options) {
  const defaultOptions = {
    credentials: 'include', // 允许携带cookie
    headers: {
      'Content-Type': 'application/json'
    }
  }
  options = Object.assign({}, defaultOptions, options)
 
  return fetch(url, options)
    .then(response => response.json())
    .catch(error => console.error('Error:', error))
}

其中，credentials设置为include表示允许携带cookie，headers表示请求头信息。

我们还可以使用Vue3提供的代理服务器进行跨域请求。在vue.config.js中进行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端接口地址
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

其中，target需要设置为后端接口的地址，pathRewrite用于重写路径。

除了上述方法，还有一个比较简单的方式就是使用JSONP技术来进行跨域请求。JSONP通过动态创建script标签，并将需要请求的数据作为回调函数的参数传给后端，在后端返回的数据中调用该回调函数并传递数据，从而完成跨域请求。

另外，可以使用vue-jsonp库来方便地进行JSONP跨域请求：

import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)
 
this.$jsonp('http://localhost:8080/api/data', { param: 'callback' }).then(response => {
  console.log(response)
})

其中，param设置为callback表示使用JSONP跨域请求，也可以设置为其他值。这种方式虽然简单易用，但需要后端进行一定的修改以支持JSONP响应格式，另外也容易受到XSS攻击的影响。