【转】[Vue] WebPack 中 proxy 的用法

转自：kimi.ai

参考：https://webpack.js.org/configuration/dev-server

在 Webpack 中，proxy 通常与 webpack-dev-server 配合使用，用于解决开发环境下的跨域问题。当你的前端应用需要向后端 API 发起请求，但后端服务运行在不同的域名或端口时，浏览器的同源策略会阻止请求。通过配置 proxy，可以将请求转发到目标服务器。

以下是 proxy 的基本用法和一些常见配置：

---

基本用法

在 webpack.config.js 或 webpack.dev.js 文件中，配置 devServer.proxy 属性。例如：

JavaScript复制

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端服务的地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
};

在这个例子中：

1. 当前端请求 /api 路径时，webpack-dev-server 会将请求转发到 http://localhost:3000。
2. changeOrigin: true 允许跨域，避免浏览器的同源策略限制。
3. pathRewrite 用于重写路径，将 /api 前缀移除，转发到后端时路径变为 /。

---

配置选项

以下是 proxy 的一些常用配置选项：

1. target

指定目标服务器的地址。例如：

JavaScript复制

target: 'http://localhost:3000'

2. changeOrigin

允许跨域请求。通常设置为 true，以避免浏览器的同源策略限制：

JavaScript复制

changeOrigin: true

3. pathRewrite

用于重写路径。例如，将 /api 前缀移除：

JavaScript复制

pathRewrite: {
  '^/api': ''
}

4. secure

默认情况下，proxy 会验证目标服务器的 SSL 证书。如果目标服务器使用自签名证书，可以将其设置为 false：

JavaScript复制

secure: false

5. bypass

允许自定义请求的处理逻辑。例如，某些请求直接返回本地文件：

JavaScript复制

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

6. logLevel

控制日志输出级别。例如：

JavaScript复制

logLevel: 'debug'

---

多个代理配置

如果需要代理多个路径，可以这样配置：

JavaScript复制

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true
  },
  '/auth': {
    target: 'http://localhost:4000',
    changeOrigin: true
  }
}

---

注意事项

1. 仅适用于开发环境：proxy 是 webpack-dev-server 的功能，仅在开发环境中生效。生产环境需要通过其他方式（如 Nginx 反向代理）解决跨域问题。
2. 路径匹配规则：proxy 的路径匹配是基于请求路径的前缀。例如，/api 会匹配 /api/user、/api/posts 等。
3. 调试日志：如果配置有问题，可以通过设置 logLevel: 'debug' 查看详细的代理日志。

---

通过合理配置 proxy，可以方便地解决开发环境下的跨域问题，提高开发效率。