webpack配置代理请求

在 Webpack 中，可以通过配置devServer中的proxy选项来设置代理请求，以解决开发环境中的跨域问题或实现特定的请求转发逻辑。以下是一个常见的 Webpack 配置示例，展示了如何设置代理：

module.exports = {
  // 其他配置项...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理的目标地址，请求将被转发到这里
        pathRewrite: { '^/api': '' }, // 重写请求路径，将 '/api' 替换为空字符串
        changeOrigin: true, // 改变请求头中的源（host）信息，用于处理跨域请求
      },
    },
  },
};

在上述配置中：

1. ‘/api’：表示需要代理的请求路径前缀。例如，对/api/users的请求将被代理。
2. target：指定代理的目标地址，即实际要将请求发送到的后端服务器地址。
3. pathRewrite：通过对象键值对来重写请求路径。上述配置将/api前缀替换为空，意味着请求会被转发到目标地址的相应路径上（如http://localhost:3000/users）。
4. changeOrigin：设置为true时，会更改请求头中的host值，以便目标服务器识别请求是从代理发起的，常用于处理跨域请求。

除了上述基本配置外，还有一些其他常见的场景和配置选项，例如：

• 代理多个前缀路径到同一目标：

   proxy: ({
     context: ('/auth', '/api'),
     target: 'http://localhost:3000',
   })

• 支持https并处理无效证书（如果需要）：

   '/api': {
     target: 'https://other-server.example.com',
     secure: false, 
   }

• 基于函数的请求绕过代理：

   '/api': {
     target: 'http://localhost:3000',
     bypass: function(req, res, proxyOptions) {
       if (req.headers.accept.indexOf('html')!== -1) {
         console.log('skipping proxy for browser request.');
         return '/index.html'; 
       }
     }
   }

• 重写代理路径的其他方式，例如添加前缀或进行自定义重写：

   // 添加基础路径
   pathRewrite: {'^/': '/basepath/'}, 
   // 自定义重写
   pathRewrite: function(path, req) { return path.replace('/api', '/base/api') }, 
   // 自定义重写并返回 Promise
   pathRewrite: async function(path, req) {
     const shouldAddSomething = await httpRequestToDecideSomething(path);
     if (shouldAddSomething) path += 'Something';
     return path;
   }

请根据实际需求进行相应的配置调整。同时，需要注意的是，Webpack 的代理配置通常只在开发环境中生效，用于解决本地开发时的跨域问题。在生产环境中，可能需要使用服务器（如 Nginx）来进行实际的代理配置。