Vite + Axios 代理配置全攻略：从零入门到轻松跨域

2023-01-15 09:14:40

克服本地开发中的跨域限制：使用 Vite 和 Axios 进行代理配置

在现代 Web 开发中，使用前端框架（如 Vue 或 React）与后端 API 交互已变得极为常见。然而，在本地开发环境中，由于浏览器同源策略的限制，直接调用后端 API 会遇到跨域问题。跨域问题会阻碍应用程序的正常运行，并妨碍开发和调试。

本文将探讨如何使用 Vite 和 Axios 在本地开发环境中配置代理，从而绕过跨域限制，让前端与后端 API 无缝通信。我们将深入探讨代理的概念、配置 Vite 和 Axios 代理的具体步骤，并提供一个实战案例，展示如何使用这些工具来解决跨域问题。

代理的概念

代理是一种转发请求的机制。在本地开发环境中，代理可以将前端发送的请求转发到后端 API。这样一来，浏览器就可以绕过同源策略的限制，直接与后端 API 进行通信。

代理充当中间人，接收前端的请求，并将其转发到目标服务器（后端 API）。目标服务器处理请求并返回响应，然后代理将响应转发回前端。这种机制允许前端与后端 API 交互，而无需担心跨域限制。

使用 Vite 配置代理

Vite 是一个现代的构建工具，它内置了强大的代理功能。我们可以通过在 vite.config.js 文件中配置 proxy 选项来实现代理。

module.exports = {
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  // ...
};

在上面的配置中，我们将 /api 路径下的请求代理到 http://localhost:3000。这意味着，当我们在前端发送请求时，Vite 会将请求转发到 http://localhost:3000，从而绕过跨域限制。

使用 Axios 配置代理

除了 Vite，我们也可以使用 Axios 来配置代理。Axios 是一个强大的 HTTP 请求库，它提供了 proxy 选项，允许我们在请求头中设置代理信息。

const axios = require('axios');

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  proxy: {
    host: 'localhost',
    port: 8080,
  },
});

在上面的配置中，我们将 Axios 的代理信息设置为 localhost:8080。这意味着，当我们在使用 Axios 发送请求时，它会自动将请求转发到 localhost:8080，从而绕过跨域限制。

实战案例

让我们来看一个实战案例，演示如何使用 Vite 和 Axios 配置代理。

项目结构

my-project
├── package.json
├── src
│   ├── App.vue
│   ├── main.js
├── vite.config.js

配置 Vite 代理

在 vite.config.js 文件中，我们添加以下配置：

module.exports = {
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  // ...
};

配置 Axios 代理

在 main.js 文件中，我们添加以下配置：

import axios from 'axios';

const instance = axios.create({
  baseURL: '/api',
  proxy: {
    host: 'localhost',
    port: 8080,
  },
});

发送请求

在 App.vue 文件中，我们发送一个请求：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('/api/users').then(res => {
        console.log(res.data);
      });
    },
  },
};
</script>