Javascript篇-Vue 项目如何配置 Proxy解决跨域

在现代前端开发中，很多时候我们需要与后端服务器进行交互。尤其是在开发过程中，前后端分离，前端运行在开发服务器（如 localhost:8080 或 localhost:5173），而后端 API 服务可能运行在不同的端口（例如 localhost:8090）。这时就会出现跨域问题。为了解决这一问题，前端开发服务器通常会配置代理（proxy）来绕过跨域限制。

什么是跨域 假设有两个网站：

• https://example1.com（A 网站） https://example2.com（B 网站）

在 A 网站 上，你的网页中有一个 JavaScript 脚本，试图访问 B 网站 上的资源（比如一个 API），这就是跨域请求。

在本篇文章中，我们将介绍如何在 Vue 项目中配置代理，以及代理的工作原理，最后给出 Vue 和 Vite 的具体配置实例。

1. 代理（Proxy）的工作原理

代理的工作原理是：当开发环境中，前端发送请求到一个不同的域名或端口时，浏览器会因同源策略（CORS）而拒绝该请求。为了绕过这种限制，前端开发服务器可以通过代理来转发请求。

• 当你发送请求到指定的 URL（例如 http://localhost:5173/api/user）时，前端开发服务器将请求转发到目标服务器（例如 http://localhost:8090/api/user）。
• 目标服务器接收请求并返回响应，前端开发服务器再将响应返回给客户端。这样，浏览器只会看到与前端开发服务器交互，从而避免了跨域问题。

2. 说在前面（npm run dev运行说明）

当你执行 npm run dev 时，通常会执行项目中的 package.json 文件的 scripts 部分的 dev 命令。这个命令的实际内容通常是启动一个Web开发服务器，监听本地的端口，比如Vite是3000或者5173；Webpack是8080。（也就是类似后端服务器，可以接收http请求）。

我们通过axios也就是XMLHttpRequest 或者 Fetch请求后台数据时，为了避免跨域，不能直接使用后台的url（localhost:8090/api/user）来发送请求，而必须使用Vite或者Webpack创建的这个Web服务器的url（localhost:3000/api/user）。这时就需要Vite或者vue提供的代理来将这个localhost:3000/api/user 这个转发到 后端的localhost:8090/api/user ，从而解决跨域这个问题。

所以开发环境下，axios实际配置的baseUrl 应该是localhost:3000 或者 '/' 默认就是当前Web服务器地址。下文中代理的地址配置成实际的后端的接口url。

3. Vue 项目中如何配置 Proxy

Vue 项目可以通过 vue.config.js 配置文件来设置代理。在该文件中，我们可以使用 devServer.proxy 来设置代理规则。

示例：Vue 2 项目配置 Proxy

首先，需要在项目根目录创建或修改 vue.config.js 文件：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8090',  // 目标服务器的地址
        changeOrigin: true,               // 如果是跨域请求，设置为 true
        pathRewrite: {                    // 重写路径
          '^/api': ''                     // 将请求路径中的 `/api` 去掉
        },
        secure: false,                    // 如果目标服务器使用了 HTTPS，并且是自签名证书，设置为 false
      },
    },
  },
};

配置说明：

• target: 目标 API 服务器的地址，即后端接口的地址。
• changeOrigin: 是否更改请求头中的 Origin 字段为目标服务器的地址，一般设置为 true。
• pathRewrite: 路径重写，'^/api': '' 表示将请求路径中的 /api 去掉，再发送到后端 API。
• secure: 如果目标是 HTTPS 并且使用了自签名证书，设置为 false。

示例：Vue 3 项目配置 Proxy（Vite）

对于 Vue 3 项目，通常使用 Vite 作为构建工具。Vite 配置代理的方式不同于 Vue CLI，需要在 vite.config.ts 或 vite.config.js 中设置。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8090',  // 目标服务器的地址
        changeOrigin: true,               // 修改请求头中的 Origin 字段
        rewrite: (path) => path.replace(/^\/api/, ''),  // 重写路径
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 配置路径别名
    },
  },
});

配置说明：

• proxy: 配置代理规则与 Vue 项目类似。
• rewrite: 将路径中的 /api 替换为空字符串，使得请求发送到目标 API。

4. 总结

通过配置代理，前端开发过程中就可以轻松避免跨域问题。代理服务器会接收前端请求，并将请求转发到目标后端 API。代理的配置方法因工具而异，Vue CLI 和 Vite 都提供了简单的方式来进行配置。在 Vue 3 使用 Vite 时，可以通过 vite.config.ts 配置代理规则，而在 Vue 2 项目中则需要使用 vue.config.js 来设置代理。

相关配置总结：

• Vue 2: 通过 vue.config.js 中的 devServer.proxy 来设置代理。
• Vue 3 (Vite): 通过 vite.config.ts 中的 server.proxy 来设置代理。

通过代理，前端请求就能够被顺利地转发到后端，避免了跨域问题，并简化了接口路径的管理。