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

当我们开发vue项目时，有几个环境，这往往会导致跨域问题。如何解决它们？今天，我将分享vue2和vue3的处理方法。

处理vue2中的跨域

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

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

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

在上述代码中，我们将以/api开头的所有请求代理到httpp://localhost:在3000上，请求路径中的/api被空字符串取代。这样，当我们在Vue中发起请求时，只需将请求路径设置为/api/xxx，Vue会自动将请求发送到代理地址，以避免跨域问题。

关于pathrewriteapi’的作用：

用代理, 首先，你必须有一个标志， 告诉他你这个连接需要代理. 不然的话, 可能你的 html, css, js这些静态资源跑去代理. 因此，我们只需要使用接口代理， 本地使用静态文件。

‘/api’: {}, 就是告诉node， 只要我的界面是‘//api一开始就用代理。所以你的界面应该这样写 /api/xx/xx. 最后代理的路径是 http://xxxxxx.com/api/xx/xx。

处理vue3中的跨域

devserverver3跨域处理.实现proxy。在vue.config.devserver在js中配置.proxy，在代理地址上映射需要跨域的接口地址。代理地址可以是本地界面，也可以是在线界面。这样，在开发环境中，Vue会将请求发送到代理地址，然后将请求转发到需要跨域的接口地址。这样可以避免跨域问题。

以下是vuee的示例.config.js文件的代码块：

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

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