前端开发跨域处理：聊聊vue2和vue3中处理跨域的不同方法应用

在我们开发vue项目的时候，有几个环境，这样经常会造成跨域问题，如何去解决呢？今天分享下关于vue2和vue3的处理方法。

在vue2处理跨域

Vue2跨域处理可以通过配置proxyTable来实现。在config/index.js中配置proxyTable，将需要跨域的接口地址映射到一个代理地址上。代理地址可以是本地的一个接口，也可以是线上的一个接口。这样在开发环境中，Vue会将请求发送到代理地址，代理地址再将请求转发到需要跨域的接口地址上。这样就可以避免跨域问题了。

以下是一个示例代码块，展示如何在config/index.js中配置proxyTable：

// config/index.js
module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在上述代码中，我们将所有以/api开头的请求都代理到http://localhost:3000上，并将请求路径中的/api替换为空字符串。这样，当我们在Vue中发起一个请求时，只需要将请求路径设置为/api/xxx即可，Vue会自动将请求发送到代理地址上，从而避免了跨域问题。

关于pathRewrite中'^/api'的作用：

用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地。

'/api': {}, 就是告诉node, 我接口只要是'/api'开头的才用代理.所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxxxxx.com/api/xx/xx。

在vue3处理跨域

Vue3跨域处理可以通过配置devServer.proxy来实现。在vue.config.js中配置devServer.proxy，将需要跨域的接口地址映射到一个代理地址上。代理地址可以是本地的一个接口，也可以是线上的一个接口。这样在开发环境中，Vue会将请求发送到代理地址，代理地址再将请求转发到需要跨域的接口地址上。这样就可以避免跨域问题了。

以下是一个示例vue.config.js文件的代码块：

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

在上面的示例中，我们将以/api开头的请求代理到http://localhost:3000上，并将请求路径中的/api替换为空字符串。这样，当我们在Vue中发送请求时，只需要将请求路径设置为/api/xxx即可，Vue会自动将请求发送到代理地址上。