配置proxyRes 可在响应头中看到请求的真实地址

在 Vite 配置中，proxy 选项用于设置开发服务器的代理规则。通过这些代理规则，你可以将前端开发服务器的请求转发到后端 API 服务器，从而解决开发环境中的跨域问题。你提到的配置片段详细地设置了代理规则，下面是对这段代码的详细解释：

代码解析

proxy: {
  [viteEnv.VITE_BASE_API]: {
    target: viteEnv.VITE_BASE_API_URL,
    changeOrigin: true,
    secure: false, // 如果是https接口，需要配置这个参数
    rewrite: (path) => path.replace(viteEnv.VITE_BASE_API, ''),
    configure: (proxy, options) => {
      // 配置此项可在响应头中看到请求的真实地址
      proxy.on('proxyRes', (proxyRes, req) => {
        proxyRes.headers['x-real-url'] =
          new URL(req.url || '', options.target as string)?.href || '';
      });
    },
  },
},

作用

1. [viteEnv.VITE_BASE_API]：

   • 这是一个动态的键，表示前端请求的前缀路径。viteEnv.VITE_BASE_API 是一个环境变量，通常用于指定 API 的基础路径，例如 /api。
   • 例如，如果 VITE_BASE_API 的值是 /api，那么所有以 /api 开头的请求都会被代理。

2. target: viteEnv.VITE_BASE_API_URL：

   • target 指定了目标服务器的地址。viteEnv.VITE_BASE_API_URL 是一个环境变量，通常用于指定后端 API 服务器的 URL，例如 http://localhost:3000。
   • 所有匹配 viteEnv.VITE_BASE_API 的请求都会被转发到 viteEnv.VITE_BASE_API_URL。

3. changeOrigin: true：

   • changeOrigin 设置为 true 时，会改变请求的 Host 头为目标服务器的域名，这有助于解决某些后端服务器的身份验证问题。
   • 例如，如果目标服务器需要根据 Host 头来识别请求来源，设置 changeOrigin: true 可以确保请求的 Host 头被正确设置。

4. secure: false：

   • secure 设置为 false 表示即使目标服务器使用 HTTPS，也不要求证书必须是有效的。
   • 这在开发环境中很有用，因为开发环境中的 HTTPS 证书通常是自签名的，不被浏览器信任。

5. rewrite: (path) => path.replace(viteEnv.VITE_BASE_API, '')：

   • rewrite 函数用于重写请求路径。在这个例子中，它将请求路径中的 viteEnv.VITE_BASE_API 部分移除。
   • 例如，如果请求路径是 /api/users，重写后会变成 /users，然后被转发到目标服务器。

6. configure: (proxy, options) => { ... }：

   • configure 函数用于进一步配置代理行为。在这个例子中，它在响应头中添加了一个 x-real-url 字段，表示请求的真实地址。
   • proxy.on('proxyRes', (proxyRes, req) => { ... }) 监听代理响应事件，修改响应头。
   • proxyRes.headers['x-real-url'] 设置响应头中的 x-real-url 字段，值为请求的真实地址。

示例

假设你有一个 Vite 项目，使用了以下环境变量：

{
  "VITE_BASE_API": "/api",
  "VITE_BASE_API_URL": "http://localhost:3000"
}

你的 vite.config.js 文件可能如下所示：

import { defineConfig } from 'vite';
import viteEnv from './vite.env'; // 假设你有一个文件来加载环境变量

export default defineConfig({
  server: {
    proxy: {
      [viteEnv.VITE_BASE_API]: {
        target: viteEnv.VITE_BASE_API_URL,
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数
        rewrite: (path) => path.replace(viteEnv.VITE_BASE_API, ''),
        configure: (proxy, options) => {
          // 配置此项可在响应头中看到请求的真实地址
          proxy.on('proxyRes', (proxyRes, req) => {
            proxyRes.headers['x-real-url'] =
              new URL(req.url || '', options.target as string)?.href || '';
          });
        },
      },
    },
  },
});

使用示例

在你的前端代码中，你可以这样发送请求：

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

这个请求会被代理到 http://localhost:3000/users，并且响应头中会包含 x-real-url 字段，表示请求的真实地址。

总结

通过 proxy 配置，你可以在 Vite 开发服务器中设置代理规则，将前端请求转发到后端 API 服务器，从而解决开发环境中的跨域问题。这些配置选项提供了灵活的方式来处理请求路径、请求头和响应头，确保开发环境中的请求能够正确地转发到目标服务器。

在 Vue 2 项目中使用 Vue CLI 和 Webpack 时，可以通过配置 devServer 的 proxy 选项来设置响应头中包含 x-real-url 字段，表示请求的真实地址。下面是一个详细的步骤和示例配置。

1. 安装依赖

确保你已经安装了 http-proxy-middleware，这是 Vue CLI 内部使用的代理中间件。

npm install http-proxy-middleware --save-dev

2. 配置 vue.config.js

在项目的根目录下创建或编辑 vue.config.js 文件，配置 devServer 的 proxy 选项。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 你的后端 API 服务器地址
        changeOrigin: true,
        secure: false, // 如果是 HTTPS 接口，需要配置这个参数
        pathRewrite: { '^/api': '' }, // 重写请求路径
        onProxyRes(proxyRes, req, res) {
          // 在响应头中添加 x-real-url 字段
          const realUrl = new URL(req.url, 'http://localhost:3000').href;
          proxyRes.headers['x-real-url'] = realUrl;
        },
      },
    },
  },
};

3. 解释配置

• /api：这是前端请求的前缀路径。所有以 /api 开头的请求都会被代理。
• target: 'http://localhost:3000'：目标服务器的地址。所有匹配 /api 的请求都会被转发到 http://localhost:3000。
• changeOrigin: true：改变请求的 Host 头为目标服务器的域名，这有助于解决某些后端服务器的身份验证问题。
• secure: false：即使目标服务器使用 HTTPS，也不要求证书必须是有效的。这在开发环境中很有用，因为开发环境中的 HTTPS 证书通常是自签名的，不被浏览器信任。
• pathRewrite: { '^/api': '' }：重写请求路径，将请求路径中的 /api 部分移除。例如，如果请求路径是 /api/users，重写后会变成 /users，然后被转发到目标服务器。
• onProxyRes(proxyRes, req, res)：监听代理响应事件，修改响应头。在这个例子中，我们在响应头中添加了一个 x-real-url 字段，表示请求的真实地址。

4. 使用示例

在你的前端代码中，你可以这样发送请求：

fetch('/api/users')
  .then(response => {
    console.log('Response headers:', response.headers);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在控制台中，你可以看到响应头中包含 x-real-url 字段，表示请求的真实地址。

5. 运行项目

确保你的项目配置正确后，运行项目：

npm run serve

总结

通过配置 vue.config.js 中的 devServer.proxy 选项，你可以在 Vue 2 项目中设置响应头中包含 x-real-url 字段，表示请求的真实地址。
这有助于在开发环境中调试和查看请求的实际路径。