Vite.config.js 配置：跨域代理，打造无缝开发体验

2023-10-02 17:20:44

导言

在现代 Web 开发中，跨域请求是一个常见且令人头痛的问题。当应用程序向与自身不同源（即协议、域名或端口）的服务器发送请求时，就会发生跨域错误。

在开发和生产环境中，跨域代理提供了优雅且高效的解决方案。借助 Vite.config.js，我们可以轻松配置代理，让应用程序与远程服务器无缝通信。

Vite.config.js 配置

Vite.config.js 是一个 JavaScript 配置文件，允许您定制 Vite 开发环境。通过添加以下代码，我们可以将代理配置为跨域请求：

// vite.config.js
export default {
  server: {
    proxy: {
      // 远程服务器的目标 URL
      '/api': {
        target: 'https://example.com',
        // 是否允许跨域
        changeOrigin: true,
        // 重写路径
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}

在示例中，我们配置了 /api 路径的代理，将请求转发到 https://example.com。通过设置 changeOrigin 为 true，我们允许跨域请求，rewrite 选项将路径重写为相对路径 /api。

Axios 与跨域

Axios 是一个流行的 JavaScript 库，用于发送跨域请求。通过以下代码，我们可以使用 Axios 向代理配置的远程服务器发送请求：

import axios from 'axios'

// 使用 Axios 发送 GET 请求
const response = await axios.get('/api/users')

// 使用 Axios 发送 POST 请求
const response = await axios.post('/api/users', { name: 'John Doe' })