Vue3中如何处理跨域请求

太过爱你忘了你带给我的痛 2023-10-12 13:19 60阅读 0赞

在前后分离的架构中，前端常常需要向后端发送跨域请求来获取数据，而跨域请求的处理是一个非常复杂的问题。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攻击的影响。