解决跨域vue3跨域问题

在做毕设的时候使用axios进行前后端的通信，在前端给后端发送数据的时候，浏览器报错跨域

1.什么是跨域

**浏览器不能执行其他网站的脚本，从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。**跨域是由浏览器的同源策略造成的，是浏览器施加的安全限制。
例如http:// 与https://
192.168.1.1 与 192.168.1.2
8080 与 8081
任意一个不同都会有跨域的问题

2.能否避免跨域

我曾想过能否绕过跨域，但发现是不行的，因为前端服务使用的端口与后端服务使用的端口固定不会是同一端口，所以跨域是必然的

3.如何解决跨域

使用代理实现，由于我使用的的是vite+vue+ts，所以我就放上vite.config.ts代码

const url = "http://localhost:8080"

export default defineConfig({
    plugins: [vue()],
    server: {
        cors: true, // 默认启用并允许任何源
        open: false,// 默认打开浏览器
        port: 80,// 访问的端口号
        host: "0.0.0.0",// 访问的地址
        proxy: {
            '/api': {	//
                target: url, // 目标地址
                ws: true,
                secure: false,
                changeOrigin: true,// 是否允许跨域代理
                rewrite: (path) => path.replace(/^\/api/, '') // 重定向地址
            }
        },
    },
    base: './',
    build: {
        outDir: 'dist',
        assetsDir: `./assets/`,
        cssCodeSplit: true,
    }
})

以上为我遇到的问题和解决办法，如果有错误，望指出