×
  • Web前端首页
  • Vue3
  • 前端开发跨域处理:聊聊vue2和vue3中处理跨域的不同方法应用

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

作者:Terry2023.04.24来源:Web前端之家浏览:2673评论:0

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

在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会自动将请求发送到代理地址上。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vue2vue320230424.html

网友评论文明上网理性发言 已有0人参与

发表评论: