Vite构建的Vue3应用轻松跨域：彻底解决本地开发跨域难题

2022-12-22 22:12:39

Vite代理配置：让跨域开发不在困难

在前端开发中，跨域问题经常困扰着开发者，它会阻碍不同来源之间的通信，导致请求被拒绝。Vite ，一种现代化的前端构建工具，提供了代理配置 功能，轻松解决跨域难题，让开发人员专注于业务逻辑，告别跨域烦恼。

跨域问题源自浏览器的同源策略 ，它限制了不同来源（协议、端口、主机）之间的请求。当前端应用试图从其源头之外的服务器获取数据时，浏览器会出于安全考虑阻止请求，从而导致跨域问题。

Vite 的代理配置功能通过将客户端请求重定向到另一个源上来绕过同源策略。这使前端应用可以轻松访问位于不同源的API和资源，从而消除跨域限制。

安装 Vite
确保在你的项目中已经安装了 Vite。
创建 vite.config.js 文件
在项目根目录下创建 vite.config.js 文件。
配置代理
在 vite.config.js 文件中添加以下代理配置代码：
```
const { defineConfig } = require('vite');

module.exports = defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
```
- /api：需要代理的请求路径。
- http://localhost:8080：目标服务器的地址。
- changeOrigin: true：允许代理服务器更改请求的源头。
- rewrite: (path) => path.replace(/^\/api/, '')：重写请求路径，以便将/api前缀从请求路径中删除。
启动 Vite 开发服务器
在终端中运行以下命令启动 Vite 开发服务器：
```
vite
```