Uniapp的Vue2，Vue3配置跨域（Proxy代理）

在开发前端项目时，经常会遇到跨域的问题。Uniapp作为一款基于Vue框架的跨平台开发工具，也需要配置跨域来实现与后端服务的交互。本文将介绍如何在Uniapp的Vue2和Vue3项目中配置跨域（Proxy代理）。

什么是跨域？

简单来说，跨域是指在浏览器上运行的JavaScript程序，通过XMLHttpRequest或Fetch API等方式请求不同域名下的资源时，会被浏览器的同源策略（Same Origin Policy）所限制，导致请求失败。跨域请求是一种客户端从不同域名、不同端口或不同协议请求服务器资源的行为。

Uniapp Vue2项目配置跨域

在Uniapp的Vue2项目中，可以通过配置vue.config.js文件来实现跨域。

1. 在项目的根目录下新建vue.config.js文件。

2. 在vue.config.js中添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      // 配置代理
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx', // 替换成实际接口的域名
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 替换成实际接口的前缀
        }
      }
    }
  }
}

其中，target是要代理的实际接口的域名，pathRewrite用于重写请求的路径前缀（如果接口本身没有统一的前缀，可以忽略这个配置）。

3. 重启Uniapp的开发服务器，即可实现跨域请求。

Uniapp Vue3项目配置跨域

在Uniapp的Vue3项目中，使用Vite作为构建工具，配置跨域稍有不同。

1. 在项目的根目录下新建vite.config.js文件。

2. 在vite.config.js中添加以下内容：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '') // 替换成实际接口的前缀
      }
    }
  }
})

同样，target是要代理的实际接口的域名，rewrite用于重写请求的路径前缀。

3. 重启Uniapp的开发服务器，即可实现跨域请求。

总结

通过以上配置，我们可以在Uniapp的Vue2和Vue3项目中实现跨域（Proxy代理）。跨域是前端开发中常见的问题，掌握配置跨域的方法对提高开发效率和解决bug都有很大的帮助。希望本文对你有所帮助！

本文来自极简博客，作者：心灵捕手，转载请注明原文链接：Uniapp的Vue2，Vue3配置跨域（Proxy代理）