高人指路：通过 webpack/Vite 动态设置代理请求头，让高某强赞不绝口！

2024-01-04 21:03:23

在前端开发中，跨域问题一直是困扰开发者的一大难题。利用 webpack 或 Vite 的代理功能，我们可以轻松解决这一问题。但是，在实际开发场景中，我们可能会遇到更复杂的情况，比如需要动态设置请求头。今天，就让我们来深入探讨如何通过 webpack/Vite 实现代理请求头的动态设置，并让业界大牛高某强都赞不绝口！

揭秘 webpack/Vite 代理机制

webpack 和 Vite 都提供了强大的代理功能，允许开发者将请求转发到不同的目标服务器。代理请求头的动态设置，是代理功能中的一个重要特性。通过动态设置请求头，我们可以根据不同的请求场景，灵活地调整请求头信息，从而满足各种 API 接口的需求。

剖析动态设置请求头的方案

要实现代理请求头的动态设置，我们需要编写一个自定义的代理中间件。在 webpack 中，可以使用 webpack-dev-middleware，而在 Vite 中，可以使用 vite-plugin-proxy。

webpack-dev-middleware

const devMiddleware = require('webpack-dev-middleware');
const devServer = require('webpack-dev-server');

const compiler = webpack(...);

const devServerOptions = {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      onProxyReq: (proxyReq, req, res) => {
        // 在这里动态设置请求头
      },
    },
  },
};

const server = new devServer(devServerOptions, compiler);

vite-plugin-proxy

const { defineConfig } = require('vite');
const vitePluginProxy = require('vite-plugin-proxy');

export default defineConfig({
  plugins: [
    vitePluginProxy({
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        configure: (proxy, req) => {
          // 在这里动态设置请求头
        },
      },
    }),
  ],
});

实例：动态添加 Authorization 头

下面是一个实际的例子，展示如何通过 webpack-dev-middleware 动态添加 Authorization 头：

devServerOptions.proxy['/api'].onProxyReq = (proxyReq, req, res) => {
  const token = req.headers['x-access-token'];
  if (token) {
    proxyReq.setHeader('Authorization', `Bearer ${token}`);
  }
};