vue3+vite项目跨域配置踩坑实战篇

针对“vue3+vite项目跨域配置踩坑实战篇”的完整攻略，我来进行详细讲解。

1. 什么是跨域问题？

在浏览器中，由于同源策略（Same-origin policy）的限制，不同域名、不同端口、不同协议的网页不能直接进行网络通信。跨域问题（Cross-Origin Resource Sharing，CORS）就是指在同一域名下，资源无法正常请求的问题。

2. 跨域问题的解决方案

我们可以使用代理，在后端服务器进行跨域的处理。但是这样会增加后端服务器的压力，而且配置起来比较麻烦。因此，我们一般使用前端自己处理跨域问题。

常用的跨域处理方式包括以下：

• 在目标服务器端设置CORS策略，允许特定来源网站访问；
• 使用JSONP（JSON Padding）跨域；
• 使用WebSocket协议跨域；
• 跨域资源共享（CORS）。

其中，本篇攻略主要介绍的是第四种方式，即CORS跨域资源共享。通过设置目标服务器的HTTP响应，允许特定来源网站的跨域访问。

3. Vite项目启动后跨域问题如何解决？

我们需要在vue3+vite项目的配置文件中，对跨域请求进行处理。我们需要添加 vite.config.js 配置文件，进行如下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://www.example.com',    // 目标服务器地址
        changeOrigin: true,   // 是否跨域
        secure:false,          // 如果是https接口，需要配置这个parameter
        rewrite: (path) => path.replace('/api/', '/'),   // 重写路径
      },
    },
  },
})

其中，/api 是指代理的前缀，https://www.example.com 是目标服务器地址，changeOrigin 表示是否跨域，rewrite 是重写路径规则。

在使用时，我们只需要将请求路径中的 /api 替换成 / 即可，例如：

axios.get('/api/user')  // 正确写法
axios.get('/user')      // 重写路径后的写法

这样我们就可以在vue3+vite项目中解决跨域问题了。

4. 示例说明

示例1：在vue3+vite项目中，访问本地mock数据时，在vite.config.js文件中的配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',    // 代理到指定地址
        changeOrigin: true,   // 是否跨域
        secure:false,          // 如果是https接口，需要配置这个parameter
        rewrite: (path) => path.replace('/api/', '/'),   // 重写路径
      },
    },
  },
})

示例2：在vue3+vite项目中，访问服务器API数据时，在vite.config.js文件中的配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://www.example.com',    // 代理到指定地址
        changeOrigin: true,   // 是否跨域
        secure:false,          // 如果是https接口，需要配置这个parameter
        rewrite: (path) => path.replace('/api/', '/'),   // 重写路径
      },
    },
  },
})

这两个示例说明了在vue3+vite项目中，如何通过代理解决跨域问题。这样就可以愉快地进行数据交互了。